refactor(execute-container-command): simplify connection logic and improve terminal availability checks

app/Livewire/Project/Shared/ExecuteContainerCommand.php

@@ -27,15 +27,9 @@ class ExecuteContainerCommand extends Component
 
     public Collection $servers;
 
-    public bool $containersLoaded = false;
+    public bool $hasShell = true;
 
-    public bool $autoConnectAttempted = false;
+    public bool $isConnecting = true;
-
-    public bool $isConnecting = false;
-
-    public bool $isConnected = false;
-
-    public string $connectionStatus = 'Loading containers...';
 
     protected $rules = [
         'server' => 'required',
@@ -43,32 +37,22 @@ class ExecuteContainerCommand extends Component
         'command' => 'required',
     ];
 
-    public function getListeners()
-    {
-        $teamId = auth()->user()->currentTeam()->id;
-
-        return [
-            "echo-private:team.{$teamId},ServiceChecked" => '$refresh',
-        ];
-    }
-
     public function mount()
     {
         if (! auth()->user()->isAdmin()) {
             abort(403);
         }
-
         $this->parameters = get_route_parameters();
         $this->containers = collect();
         $this->servers = collect();
         if (data_get($this->parameters, 'application_uuid')) {
             $this->type = 'application';
-            $this->resource = Application::whereUuid($this->parameters['application_uuid'])->firstOrFail();
+            $this->resource = Application::where('uuid', $this->parameters['application_uuid'])->firstOrFail();
-            if ($this->resource->destination->server->isFunctional() && $this->resource->destination->server->isTerminalEnabled()) {
+            if ($this->resource->destination->server->isFunctional()) {
                 $this->servers = $this->servers->push($this->resource->destination->server);
             }
             foreach ($this->resource->additional_servers as $server) {
-                if ($server->isFunctional() && $server->isTerminalEnabled()) {
+                if ($server->isFunctional()) {
                     $this->servers = $this->servers->push($server);
                 }
             }
@@ -80,23 +64,21 @@ class ExecuteContainerCommand extends Component
                 abort(404);
             }
             $this->resource = $resource;
-            if ($this->resource->destination->server->isFunctional() && $this->resource->destination->server->isTerminalEnabled()) {
+            if ($this->resource->destination->server->isFunctional()) {
                 $this->servers = $this->servers->push($this->resource->destination->server);
             }
             $this->loadContainers();
         } elseif (data_get($this->parameters, 'service_uuid')) {
             $this->type = 'service';
-            $this->resource = Service::whereUuid($this->parameters['service_uuid'])->firstOrFail();
+            $this->resource = Service::where('uuid', $this->parameters['service_uuid'])->firstOrFail();
-            if ($this->resource->server->isFunctional() && $this->resource->server->isTerminalEnabled()) {
+            if ($this->resource->server->isFunctional()) {
                 $this->servers = $this->servers->push($this->resource->server);
             }
             $this->loadContainers();
         } elseif (data_get($this->parameters, 'server_uuid')) {
             $this->type = 'server';
-            $this->resource = Server::ownedByCurrentTeam()->whereUuid($this->parameters['server_uuid'])->firstOrFail();
+            $this->resource = Server::where('uuid', $this->parameters['server_uuid'])->firstOrFail();
             $this->server = $this->resource;
-            $this->containersLoaded = true; // Server doesn't need container loading
-            $this->connectionStatus = 'Waiting for terminal to be ready...';
         }
     }
 
@@ -161,66 +143,6 @@ class ExecuteContainerCommand extends Component
         if ($this->containers->count() === 1) {
             $this->selected_container = data_get($this->containers->first(), 'container.Names');
         }
-
-        $this->containersLoaded = true;
-        $this->connectionStatus = 'Waiting for terminal to be ready...';
-    }
-
-    public function initializeTerminalConnection()
-    {
-        try {
-            // Only auto-connect if containers are loaded and we haven't attempted before
-            if (! $this->containersLoaded || $this->autoConnectAttempted || $this->isConnecting) {
-                return;
-            }
-
-            $this->autoConnectAttempted = true;
-
-            // Ensure component is in a stable state before proceeding
-            $this->skipRender();
-
-            $this->isConnecting = true;
-
-            if ($this->type === 'server') {
-                $this->connectionStatus = 'Establishing connection to server terminal...';
-                $this->connectToServer();
-            } elseif ($this->containers->count() === 1) {
-                $this->connectionStatus = 'Establishing connection to container terminal...';
-                $this->connectToContainer();
-            } else {
-                $this->isConnecting = false;
-                $this->connectionStatus = '';
-            }
-        } catch (\Throwable $e) {
-            // Log the error but don't let it bubble up to cause snapshot issues
-            logger()->error('Terminal auto-connection failed', [
-                'error' => $e->getMessage(),
-                'trace' => $e->getTraceAsString(),
-                'component_id' => $this->getId(),
-            ]);
-
-            // Reset state to allow manual connection
-            $this->autoConnectAttempted = false;
-            $this->isConnecting = false;
-            $this->connectionStatus = 'Auto-connection failed. Please use the reconnect button.';
-        }
-    }
-
-    #[On('terminalConnected')]
-    public function terminalConnected()
-    {
-        $this->isConnected = true;
-        $this->isConnecting = false;
-        $this->connectionStatus = '';
-    }
-
-    #[On('terminalDisconnected')]
-    public function terminalDisconnected()
-    {
-        $this->isConnected = false;
-        $this->isConnecting = false;
-        $this->autoConnectAttempted = false;
-        $this->connectionStatus = 'Connection lost. Click Reconnect to try again.';
     }
 
     private function checkShellAvailability(Server $server, string $container): bool
@@ -245,11 +167,6 @@ class ExecuteContainerCommand extends Component
             if ($this->server->isForceDisabled()) {
                 throw new \RuntimeException('Server is disabled.');
             }
-            if (! $this->server->isTerminalEnabled()) {
-                throw new \RuntimeException('Terminal access is disabled on this server.');
-            }
-            $this->isConnecting = true;
-            $this->connectionStatus = 'Establishing connection to server terminal...';
             $this->dispatch(
                 'send-terminal-command',
                 false,
@@ -257,10 +174,9 @@ class ExecuteContainerCommand extends Component
                 data_get($this->server, 'uuid')
             );
         } catch (\Throwable $e) {
-            $this->isConnecting = false;
-            $this->connectionStatus = 'Connection failed.';
-
             return handleError($e, $this);
+        } finally {
+            $this->isConnecting = false;
         }
     }
 
@@ -306,8 +222,11 @@ class ExecuteContainerCommand extends Component
                 throw new \RuntimeException('Server ownership verification failed.');
             }
 
-            $this->isConnecting = true;
+            $this->hasShell = $this->checkShellAvailability($server, data_get($container, 'container.Names'));
-            $this->connectionStatus = 'Establishing connection to container terminal...';
+            if (! $this->hasShell) {
+                return;
+            }
+
             $this->dispatch(
                 'send-terminal-command',
                 true,
@@ -315,10 +234,9 @@ class ExecuteContainerCommand extends Component
                 data_get($container, 'server.uuid')
             );
         } catch (\Throwable $e) {
-            $this->isConnecting = false;
-            $this->connectionStatus = 'Connection failed.';
-
             return handleError($e, $this);
+        } finally {
+            $this->isConnecting = false;
         }
     }
 

app/Livewire/Project/Shared/Terminal.php

@@ -44,7 +44,7 @@ class Terminal extends Component
     public function sendTerminalCommand($isContainer, $identifier, $serverUuid)
     {
         $server = Server::ownedByCurrentTeam()->whereUuid($serverUuid)->firstOrFail();
-        if (! $server->isTerminalEnabled()) {
+        if (! $server->isTerminalEnabled() || $server->isForceDisabled()) {
             throw new \RuntimeException('Terminal access is disabled on this server.');
         }
 

resources/views/livewire/project/shared/execute-container-command.blade.php

@@ -17,41 +17,44 @@
         <livewire:server.navbar :server="$server" />
     @endif
 
-    @if ($type === 'server')
+    @if (!$hasShell)
-        @if (!$server->isForceDisabled() && $server->isTerminalEnabled())
+        <div class="flex items-center justify-center w-full py-4 mx-auto">
-            <form class="w-full flex gap-2 items-start justify-start" wire:submit="$dispatchSelf('connectToServer')">
+            <div class="p-4 w-full rounded border dark:bg-coolgray-100 dark:border-coolgray-300">
-                <h2 class="pb-4">Terminal</h2>
+                <div class="flex flex-col items-center justify-center space-y-4">
-                <x-forms.button type="submit" :disabled="$isConnecting">
+                    <svg class="w-12 h-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    Reconnect
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                </x-forms.button>
+                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                {{-- Loading indicator for all connection states --}}
+                    </svg>
-                @if (!$containersLoaded || $isConnecting || $connectionStatus)
+                    <div class="text-center">
-                    <span class="text-sm">{{ $connectionStatus }}</span>
+                        <h3 class="text-lg font-medium">Terminal Not Available</h3>
-                @endif
+                        <p class="mt-2 text-sm text-gray-500">No shell (bash/sh) is available in this container. Please
-            </form>
+                            ensure either bash or sh is installed to use the terminal.</p>
-            <div class="mx-auto w-full">
+                    </div>
-                <livewire:project.shared.terminal wire:key="terminal-{{ $this->getId() }}-server" />
+                </div>
+            </div>
         </div>
     @else
-            <div>Terminal access is disabled on this server.</div>
+        @if ($type === 'server')
-        @endif
+            <form class="w-full flex gap-2 items-start" wire:submit="$dispatchSelf('connectToServer')"
+                wire:init="$dispatchSelf('connectToServer')">
+                <h2 class="pb-4">Terminal</h2>
+                <x-forms.button :disabled="$isConnecting"
+                    type="submit">{{ $isConnecting ? 'Connecting...' : 'Reconnect' }}</x-forms.button>
+            </form>
+            <div class="mx-auto w-full">
+                <livewire:project.shared.terminal />
+            </div>
         @else
             @if (count($containers) === 0)
-            <div class="pt-4">No containers are running on this server or terminal access is disabled.</div>
+                <div class="pt-4">No containers are running.</div>
             @else
                 @if (count($containers) === 1)
-                <form class="w-full flex gap-2 items-start justify-start pt-4"
+                    <form class="w-full flex gap-2 items-start pt-4" wire:submit="$dispatchSelf('connectToContainer')"
-                    wire:submit="$dispatchSelf('connectToContainer')">
+                        wire:init="$dispatchSelf('connectToContainer')">
                         <h2 class="pb-4">Terminal</h2>
-                    <x-forms.button type="submit" :disabled="$isConnecting">
+                        <x-forms.button :disabled="$isConnecting"
-                        Reconnect
+                            type="submit">{{ $isConnecting ? 'Connecting...' : 'Reconnect' }}</x-forms.button>
-                    </x-forms.button>
                     </form>
-
-                {{-- Loading indicator for all connection states --}}
-                @if (!$containersLoaded || $isConnecting || $connectionStatus)
-                    <span class="text-sm">{{ $connectionStatus }}</span>
-                @endif
                 @else
                     <form class="w-full pt-4 flex gap-2 flex-col" wire:submit="$dispatchSelf('connectToContainer')">
                         <x-forms.select label="Container" id="container" required wire:model="selected_container">
@@ -65,130 +68,14 @@
                                 </option>
                             @endforeach
                         </x-forms.select>
-                    <x-forms.button class="w-full" type="submit" :disabled="$isConnecting">
+                        <x-forms.button :disabled="$isConnecting" class="w-full"
-                        {{ $isConnecting ? 'Connecting...' : 'Connect' }}
+                            type="submit">{{ $isConnecting ? 'Connecting...' : 'Connect' }}</x-forms.button>
-                    </x-forms.button>
                     </form>
-
-                {{-- Loading indicator for manual connection --}}
-                @if ($isConnecting || $connectionStatus)
-                    <span class="text-sm">{{ $connectionStatus }}</span>
-                @endif
                 @endif
                 <div class="mx-auto w-full">
-                <livewire:project.shared.terminal wire:key="terminal-{{ $this->getId() }}-container" />
+                    <livewire:project.shared.terminal />
                 </div>
             @endif
         @endif
-
+    @endif
-    @script
-        <script>
-            let autoConnectionAttempted = false;
-            let maxRetries = 5;
-            let currentRetry = 0;
-
-            // Robust component readiness check
-            function isComponentReady() {
-                // Check if Livewire component exists and is properly initialized
-                if (!$wire || typeof $wire.call !== 'function') {
-                    return false;
-                }
-
-                // Check if terminal container exists
-                const terminalContainer = document.getElementById('terminal-container');
-                if (!terminalContainer) {
-                    return false;
-                }
-
-                // Check if Alpine component is initialized
-                if (!terminalContainer._x_dataStack || !terminalContainer._x_dataStack[0]) {
-                    return false;
-                }
-
-                return true;
-            }
-
-            // Safe connection with retries
-            function attemptConnection() {
-                if (autoConnectionAttempted) return;
-
-                if (!isComponentReady()) {
-                    currentRetry++;
-                    if (currentRetry < maxRetries) {
-                        console.log(`[Terminal] Component not ready, retry ${currentRetry}/${maxRetries}`);
-                        setTimeout(attemptConnection, 1000);
-                        return;
-                    } else {
-                        console.error('[Terminal] Max retries reached, giving up auto-connection');
-                        return;
-                    }
-                }
-
-                autoConnectionAttempted = true;
-                console.log('[Terminal] Attempting auto-connection');
-
-                try {
-                    // Use a safer method that doesn't trigger re-renders
-                    $wire.call('initializeTerminalConnection').catch(error => {
-                        console.error('[Terminal] Auto-connection failed:', error);
-                        // Reset for manual retry
-                        autoConnectionAttempted = false;
-                    });
-                } catch (error) {
-                    console.error('[Terminal] Auto-connection failed immediately:', error);
-                    // Reset for manual retry
-                    autoConnectionAttempted = false;
-                }
-            }
-
-            // Wait for Livewire to be fully initialized
-            function waitForLivewire() {
-                if (window.Livewire && window.Livewire.all().length > 0) {
-                    // Extra delay in production to ensure stability
-                    const isProduction = @js(app()->environment('production'));
-                    const delay = isProduction ? 2000 : 1000;
-                    setTimeout(attemptConnection, delay);
-                } else {
-                    setTimeout(waitForLivewire, 200);
-                }
-            }
-
-            // Multiple initialization triggers for robustness
-            document.addEventListener('DOMContentLoaded', waitForLivewire);
-
-            // Livewire-specific events
-            document.addEventListener('livewire:init', () => {
-                setTimeout(waitForLivewire, 500);
-            });
-
-            document.addEventListener('livewire:navigated', () => {
-                autoConnectionAttempted = false;
-                currentRetry = 0;
-                setTimeout(waitForLivewire, 500);
-            });
-
-            // Additional safety net for production
-            const isProduction = @js(app()->environment('production'));
-            if (isProduction) {
-                window.addEventListener('load', () => {
-                    if (!autoConnectionAttempted) {
-                        setTimeout(waitForLivewire, 1000);
-                    }
-                });
-
-                // Emergency fallback - disable auto-connection if too many errors
-                let errorCount = 0;
-                window.addEventListener('error', (event) => {
-                    if (event.message && event.message.includes('Snapshot missing')) {
-                        errorCount++;
-                        console.warn(`[Terminal] Snapshot error detected (${errorCount})`);
-                        if (errorCount >= 3) {
-                            console.error('[Terminal] Too many snapshot errors, disabling auto-connection');
-                            autoConnectionAttempted = true; // Prevent further attempts
-                        }
-                    }
-                });
-            }
-        </script>
-    @endscript
 </div>