From 7df6890920e2a002d8e5161ba90b598b2b6a8f34 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 6 Jun 2025 21:34:27 +0200
Subject: [PATCH] refactor(terminal-connection): streamline auto-connection
 logic and improve component readiness checks

---
 .../Shared/ExecuteContainerCommand.php        |  3 +-
 .../execute-container-command.blade.php       | 41 ++++++++-----------
 2 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/app/Livewire/Project/Shared/ExecuteContainerCommand.php b/app/Livewire/Project/Shared/ExecuteContainerCommand.php
index 9891808b3..40004354f 100644
--- a/app/Livewire/Project/Shared/ExecuteContainerCommand.php
+++ b/app/Livewire/Project/Shared/ExecuteContainerCommand.php
@@ -168,11 +168,10 @@ class ExecuteContainerCommand extends Component
         $this->connectionStatus = 'Waiting for terminal to be ready...';
     }
 
-    #[On('initializeTerminalConnection')]
     public function initializeTerminalConnection()
     {
         // Only auto-connect if containers are loaded and we haven't attempted before
-        if (! $this->containersLoaded || $this->autoConnectAttempted) {
+        if (! $this->containersLoaded || $this->autoConnectAttempted || $this->isConnecting) {
             return;
         }
 
diff --git a/resources/views/livewire/project/shared/execute-container-command.blade.php b/resources/views/livewire/project/shared/execute-container-command.blade.php
index f40a1c82f..768680ec3 100644
--- a/resources/views/livewire/project/shared/execute-container-command.blade.php
+++ b/resources/views/livewire/project/shared/execute-container-command.blade.php
@@ -106,36 +106,27 @@
         <script>
             let autoConnectionAttempted = false;
 
-            // Wait for terminal WebSocket to be ready before attempting auto-connection
-            function tryAutoConnection() {
+            // Simple auto-connection that waits for component stability
+            function initializeConnection() {
                 if (autoConnectionAttempted) return;
+                autoConnectionAttempted = true;
 
-                const terminalContainer = document.getElementById('terminal-container');
-                if (!terminalContainer) return;
-
-                // Check if Alpine component is initialized and WebSocket is ready
-                if (terminalContainer._x_dataStack &&
-                    terminalContainer._x_dataStack[0] &&
-                    terminalContainer._x_dataStack[0].isWebSocketReady()) {
-
-                    autoConnectionAttempted = true;
-                    $wire.dispatchSelf('initializeTerminalConnection');
-                }
+                // Add delay to ensure all components are fully rendered
+                setTimeout(() => {
+                    $wire.call('initializeTerminalConnection');
+                }, 1000);
             }
 
-            // Listen for terminal WebSocket ready event
-            document.addEventListener('terminal-websocket-ready', tryAutoConnection);
+            // Wait for everything to be ready before auto-connecting
+            document.addEventListener('DOMContentLoaded', () => {
+                setTimeout(initializeConnection, 500);
+            });
 
-            // Fallback polling in case event is missed
-            function pollForTerminalReady() {
-                if (!autoConnectionAttempted) {
-                    tryAutoConnection();
-                    setTimeout(pollForTerminalReady, 300);
-                }
-            }
-
-            // Start polling after a short delay to allow Alpine to initialize
-            setTimeout(pollForTerminalReady, 200);
+            // Fallback for SPA navigation
+            document.addEventListener('livewire:navigated', () => {
+                autoConnectionAttempted = false;
+                setTimeout(initializeConnection, 500);
+            });
         </script>
     @endscript
 </div>