Created hook to run workflow, attached to run button in control bar

app/w/[id]/workflow.tsx

@@ -27,6 +27,7 @@ import { BlockState } from '@/stores/workflow/types'
 import { NotificationList } from '@/app/w/components/notifications/notifications'
 import { useNotificationStore } from '@/stores/notifications/notifications-store'
 import { executeWorkflow } from '@/lib/workflow'
+import { useWorkflowExecution } from '../hooks/use-workflow-execution'
 
 /**
  * Represents the data structure for a workflow node
@@ -95,6 +96,7 @@ const edgeTypes: EdgeTypes = { custom: CustomEdge }
  */
 function WorkflowCanvas() {
   const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null)
+  const { isExecuting, executionResult, handleRunWorkflow } = useWorkflowExecution()
 
   const {
     blocks,
@@ -108,8 +110,6 @@ function WorkflowCanvas() {
     undo,
     redo,
   } = useWorkflowStore()
-  const [isExecuting, setIsExecuting] = useState(false)
-  const [executionResult, setExecutionResult] = useState<any>(null)
   const { addNotification } = useNotificationStore()
 
   // Convert blocks to ReactFlow nodes using local selectedBlockId
@@ -236,41 +236,6 @@ function WorkflowCanvas() {
     }
   `
 
-  /**
-   * Handles the execution of the workflow
-   * Serializes the workflow, executes it, and handles the results
-   */
-  const handleRunWorkflow = async () => {
-    try {
-      setIsExecuting(true)
-      setExecutionResult(null)
-
-      const result = await executeWorkflow(
-        blocks,
-        edges,
-        window.location.pathname.split('/').pop() || 'workflow'
-      )
-
-      setExecutionResult(result)
-
-      if (result.success) {
-        addNotification('console', 'Workflow completed successfully')
-      } else {
-        addNotification('error', `Failed to execute workflow: ${result.error}`)
-      }
-    } catch (error: any) {
-      console.error('Error executing workflow:', error)
-      setExecutionResult({
-        success: false,
-        error:
-          error instanceof Error ? error.message : 'Unknown error occurred',
-      })
-      addNotification('error', `Failed to execute workflow: ${error.message}`)
-    } finally {
-      setIsExecuting(false)
-    }
-  }
-
   // Add keyboard shortcut handler
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -296,13 +261,6 @@ function WorkflowCanvas() {
     <div className="relative w-full h-[calc(100vh-56px)]">
       <NotificationList />
       <style>{keyframeStyles}</style>
-      {/* <button
-        onClick={handleRunWorkflow}
-        disabled={isExecuting}
-        className="absolute top-4 right-4 z-10 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed"
-      >
-        {isExecuting ? 'Running...' : 'Test Run'}
-      </button> */}
       <ReactFlow
         nodes={nodes}
         edges={edges}

app/w/components/control-bar/control-bar.tsx

@@ -14,11 +14,13 @@ import { useWorkflowStore } from '@/stores/workflow/workflow-store'
 import { HistoryDropdownItem } from './components/history-dropdown-item'
 import { formatDistanceToNow } from 'date-fns'
 import { useEffect, useState } from 'react'
+import { useWorkflowExecution } from '../../hooks/use-workflow-execution'
 
 export function ControlBar() {
   const { notifications } = useNotificationStore()
   const { history, undo, redo } = useWorkflowStore()
   const [, forceUpdate] = useState({})
+  const { isExecuting, handleRunWorkflow } = useWorkflowExecution()
 
   // Update the time display every minute
   useEffect(() => {
@@ -110,9 +112,13 @@ export function ControlBar() {
           )}
         </DropdownMenu>
 
-        <Button className="gap-2 bg-[#7F2FFF] hover:bg-[#7F2FFF]/90">
+        <Button 
+          className="gap-2 bg-[#7F2FFF] hover:bg-[#7F2FFF]/90" 
+          onClick={handleRunWorkflow}
+          disabled={isExecuting}
+        >
           <Play fill="currentColor" className="!h-3.5 !w-3.5" />
-          Run
+          {isExecuting ? 'Running...' : 'Run'}
         </Button>
       </div>
     </div>

app/w/hooks/use-workflow-execution.ts

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { useWorkflowStore } from '@/stores/workflow/workflow-store'
+import { useNotificationStore } from '@/stores/notifications/notifications-store'
+import { executeWorkflow } from '@/lib/workflow'
+
+export function useWorkflowExecution() {
+  const [isExecuting, setIsExecuting] = useState(false)
+  const [executionResult, setExecutionResult] = useState<any>(null)
+  const { blocks, edges } = useWorkflowStore()
+  const { addNotification } = useNotificationStore()
+
+  const handleRunWorkflow = async () => {
+    try {
+      setIsExecuting(true)
+      setExecutionResult(null)
+
+      const result = await executeWorkflow(
+        blocks,
+        edges,
+        window.location.pathname.split('/').pop() || 'workflow'
+      )
+
+      setExecutionResult(result)
+
+      if (result.success) {
+        addNotification('console', 'Workflow completed successfully')
+      } else {
+        addNotification('error', `Failed to execute workflow: ${result.error}`)
+      }
+    } catch (error: any) {
+      console.error('Error executing workflow:', error)
+      setExecutionResult({
+        success: false,
+        error:
+          error instanceof Error ? error.message : 'Unknown error occurred',
+      })
+      addNotification('error', `Failed to execute workflow: ${error.message}`)
+    } finally {
+      setIsExecuting(false)
+    }
+  }
+
+  return {
+    isExecuting,
+    executionResult,
+    handleRunWorkflow
+  }
+}