refactor(terminal-connection): streamline auto-connection logic and improve component readiness checks

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;
         }
 

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
+            // Simple auto-connection that waits for component stability
-            function tryAutoConnection() {
+            function initializeConnection() {
                 if (autoConnectionAttempted) return;
+                autoConnectionAttempted = true;
 
-                const terminalContainer = document.getElementById('terminal-container');
+                // Add delay to ensure all components are fully rendered
-                if (!terminalContainer) return;
+                setTimeout(() => {
-
+                    $wire.call('initializeTerminalConnection');
-                // Check if Alpine component is initialized and WebSocket is ready
+                }, 1000);
-                if (terminalContainer._x_dataStack &&
-                    terminalContainer._x_dataStack[0] &&
-                    terminalContainer._x_dataStack[0].isWebSocketReady()) {
-
-                    autoConnectionAttempted = true;
-                    $wire.dispatchSelf('initializeTerminalConnection');
-                }
             }
 
-            // Listen for terminal WebSocket ready event
+            // Wait for everything to be ready before auto-connecting
-            document.addEventListener('terminal-websocket-ready', tryAutoConnection);
+            document.addEventListener('DOMContentLoaded', () => {
+                setTimeout(initializeConnection, 500);
+            });
 
-            // Fallback polling in case event is missed
+            // Fallback for SPA navigation
-            function pollForTerminalReady() {
+            document.addEventListener('livewire:navigated', () => {
-                if (!autoConnectionAttempted) {
+                autoConnectionAttempted = false;
-                    tryAutoConnection();
+                setTimeout(initializeConnection, 500);
-                    setTimeout(pollForTerminalReady, 300);
+            });
-                }
-            }
-
-            // Start polling after a short delay to allow Alpine to initialize
-            setTimeout(pollForTerminalReady, 200);
         </script>
     @endscript
 </div>