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

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') {