feat(terminal): dispatch focus event for terminal after connection and enhance focus handling in JavaScript

app/Livewire/Project/Shared/ExecuteContainerCommand.php

@@ -158,6 +158,9 @@ class ExecuteContainerCommand extends Component
                 data_get($server, 'name'),
                 data_get($server, 'uuid')
             );
+
+            // Dispatch a frontend event to ensure terminal gets focus after connection
+            $this->dispatch('terminal-should-focus');
         } catch (\Throwable $e) {
             return handleError($e, $this);
         } finally {
@@ -213,6 +216,9 @@ class ExecuteContainerCommand extends Component
                 data_get($container, 'container.Names'),
                 data_get($container, 'server.uuid')
             );
+
+            // Dispatch a frontend event to ensure terminal gets focus after connection
+            $this->dispatch('terminal-should-focus');
         } catch (\Throwable $e) {
             return handleError($e, $this);
         } finally {

resources/js/terminal.js

@@ -48,6 +48,18 @@ export function initializeTerminalComponent() {
                     this.sendCommandWhenReady({ command: command });
                 });
 
+                this.$wire.on('terminal-should-focus', () => {
+                    // Wait for terminal to be ready, then focus
+                    const focusWhenReady = () => {
+                        if (this.terminalActive && this.term) {
+                            this.term.focus();
+                        } else {
+                            setTimeout(focusWhenReady, 100);
+                        }
+                    };
+                    focusWhenReady();
+                });
+
                 this.keepAliveInterval = setInterval(this.keepAlive.bind(this), 30000);
 
                 this.$watch('terminalActive', (active) => {
@@ -353,6 +365,15 @@ export function initializeTerminalComponent() {
                         this.resizeTerminal();
                     }, 200);
 
+                    // Ensure terminal gets focus after connection with multiple attempts
+                    setTimeout(() => {
+                        this.term.focus();
+                    }, 100);
+                    
+                    setTimeout(() => {
+                        this.term.focus();
+                    }, 500);
+
                     // Notify parent component that terminal is connected
                     this.$wire.dispatch('terminalConnected');
                 } else if (event.data === 'unprocessable') {

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

@@ -45,7 +45,8 @@
         <livewire:server.navbar :server="$servers->first()" />
         @if ($servers->first()->isTerminalEnabled() && $servers->first()->isFunctional())
             <form class="w-full flex gap-2 items-start" wire:submit="$dispatchSelf('connectToServer')"
-                wire:init="$dispatchSelf('connectToServer')">
+                x-data="{ autoConnected: false }"
+                x-on:terminal-websocket-ready.window="if (!autoConnected) { autoConnected = true; $wire.dispatchSelf('connectToServer'); }">
                 <h2 class="pb-4">Terminal</h2>
                 <x-forms.button :disabled="$isConnecting"
                     type="submit">{{ $isConnecting ? 'Connecting...' : 'Connect' }}</x-forms.button>