Faça funcionar a página e simular a contração de um agente

index.html

@@ -68,11 +68,11 @@
                     <h1 class="text-xl font-bold text-gray-900">AgentFlow Builder</h1>
                 </div>
                 <div class="flex items-center space-x-4">
-                    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center space-x-2">
-                        <i data-feather="play" class="w-4 h-4"></i>
-                        <span>Run Agent</span>
-                    </button>
-                    <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors flex items-center space-x-2">
+                <button id="run-agent" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center space-x-2">
+                    <i data-feather="play" class="w-4 h-4"></i>
+                    <span>Run Agent</span>
+                </button>
+<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors flex items-center space-x-2">
                         <i data-feather="save" class="w-4 h-4"></i>
                         <span>Save</span>
                     </button>
@@ -231,7 +231,6 @@
             </div>
         </div>
     </div>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             feather.replace();
@@ -243,8 +242,9 @@
             let offsetX = 0;
             let offsetY = 0;
             let connections = [];
-
-            // Drag and drop functionality
+            let isRunning = false;
+            let currentExecution = null;
+// Drag and drop functionality
             document.querySelectorAll('.node[draggable="true"]').forEach(node => {
                 node.addEventListener('dragstart', function(e) {
                     e.dataTransfer.setData('text/plain', JSON.stringify({
@@ -492,7 +492,6 @@
                 makeNodeDraggable(node);
                 addConnectionPoints(node);
             });
-
             // Add some sample connections
             setTimeout(() => {
                 createConnection(
@@ -504,7 +503,188 @@
                     { node: 'output-1', type: 'input' }
                 );
             }, 100);
+
+            // Run Agent functionality
+            document.getElementById('run-agent').addEventListener('click', function() {
+                if (isRunning) {
+                    stopExecution();
+                } else {
+                    startExecution();
+                }
+            });
+
+            function startExecution() {
+                if (isRunning) return;
+                
+                isRunning = true;
+                const runButton = document.getElementById('run-agent');
+                runButton.innerHTML = '<i data-feather="square" class="w-4 h-4"></i><span>Stop</span>';
+                feather.replace();
+                runButton.classList.remove('bg-blue-600', 'hover:bg-blue-700');
+                runButton.classList.add('bg-red-600', 'hover:bg-red-700');
+                
+                // Reset all nodes to default state
+                document.querySelectorAll('.node[data-node-id]').forEach(node => {
+                    node.classList.remove('executing', 'success', 'error');
+                });
+
+                // Simulate agent execution flow
+                currentExecution = simulateAgentExecution();
+            }
+
+            function stopExecution() {
+                isRunning = false;
+                const runButton = document.getElementById('run-agent');
+                runButton.innerHTML = '<i data-feather="play" class="w-4 h-4"></i><span>Run Agent</span>';
+                feather.replace();
+                runButton.classList.remove('bg-red-600', 'hover:bg-red-700');
+                runButton.classList.add('bg-blue-600', 'hover:bg-blue-700');
+                
+                if (currentExecution) {
+                    clearTimeout(currentExecution);
+                    currentExecution = null;
+                }
+
+                // Reset all nodes
+                document.querySelectorAll('.node[data-node-id]').forEach(node => {
+                    node.classList.remove('executing', 'success', 'error');
+                });
+            }
+
+            function simulateAgentExecution() {
+                const nodes = {
+                    'input-1': document.querySelector('[data-node-id="input-1"]'),
+                    'agent-1': document.querySelector('[data-node-id="agent-1"]'),
+                    'tool-1': document.querySelector('[data-node-id="tool-1"]'),
+                    'output-1': document.querySelector('[data-node-id="output-1"]')
+                };
+
+                let step = 0;
+                
+                function executeStep() {
+                    if (!isRunning) return;
+                    
+                    switch(step) {
+                        case 0:
+                            // Input node processing
+                            highlightNode(nodes['input-1'], 'executing');
+                    setTimeout(() => {
+                        highlightNode(nodes['input-1'], 'success');
+                        step++;
+                        executeStep();
+                    }, 1000);
+                    break;
+                        
+                        case 1:
+                            // LLM Agent processing
+                            highlightNode(nodes['agent-1'], 'executing');
+                            setTimeout(() => {
+                                highlightNode(nodes['agent-1'], 'success');
+                                step++;
+                                executeStep();
+                            }, 2000);
+                            break;
+                            
+                        case 2:
+                            // Tool processing (Web Search)
+                            highlightNode(nodes['tool-1'], 'executing');
+                            setTimeout(() => {
+                                highlightNode(nodes['tool-1'], 'success');
+                                step++;
+                                executeStep();
+                            }, 1500);
+                            break;
+                            
+                        case 3:
+                            // Output node
+                            highlightNode(nodes['output-1'], 'executing');
+                            setTimeout(() => {
+                                highlightNode(nodes['output-1'], 'success');
+                                // Execution complete
+                                setTimeout(() => {
+                                    stopExecution();
+                                    showExecutionResult();
+                                }, 500);
+                            break;
+                    }
+                }
+                
+                executeStep();
+                return currentExecution;
+            }
+
+            function highlightNode(node, state) {
+                node.classList.remove('executing', 'success', 'error');
+                if (state) {
+                    node.classList.add(state);
+                    
+                    // Add pulsing animation for executing state
+                    if (state === 'executing') {
+                        node.style.animation = 'pulse 1.5s infinite';
+                    } else {
+                        node.style.animation = '';
+                    }
+                }
+
+            function showExecutionResult() {
+                // Create a simple result modal
+                const modal = document.createElement('div');
+                modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
+                modal.innerHTML = `
+                    <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
+                        <div class="flex items-center justify-between mb-4">
+                            <h3 class="text-lg font-semibold text-gray-900">Execution Complete</h3>
+                            <button onclick="this.parentElement.parentElement.remove()" class="text-gray-400 hover:text-gray-600">
+                        <i data-feather="x" class="w-5 h-5"></i>
+                    </button>
+                </div>
+                <div class="space-y-3">
+                    <div class="flex items-center space-x-2 text-green-600">
+                            <i data-feather="check-circle" class="w-5 h-5"></i>
+                            <span class="text-sm font-medium">Agent executed successfully!</span>
+                        </div>
+                        <div class="bg-gray-50 rounded-lg p-4">
+                            <h4 class="text-xs font-medium text-gray-700 mb-2">Execution Log</h4>
+                            <div class="text-xs text-gray-600 space-y-1">
+                            <div>✓ Input processed</div>
+                            <div>✓ LLM reasoning completed</div>
+                            <div>✓ Web search executed</div>
+                            <div>✓ Output generated</div>
+                        </div>
+                    </div>
+                    <div class="mt-6 flex justify-end">
+                        <button onclick="this.parentElement.parentElement.parentElement.remove()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+                        Close
+                    </button>
+                </div>
+            `;
+                document.body.appendChild(modal);
+                feather.replace();
+            }
+
+            // Add CSS for execution states
+            const style = document.createElement('style');
+            style.textContent = `
+                .node.executing {
+                    border-color: #3B82F6 !important;
+                    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+                }
+                .node.success {
+                    border-color: #10B981 !important;
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
+                }
+                .node.error {
+                    border-color: #EF4444 !important;
+                    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
+                }
+                @keyframes pulse {
+                    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
+                    70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
+                    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+                }
+            `;
+            document.head.appendChild(style);
         });
-    </script>
+</script>
 </body>
 </html>