diff --git a/apps/web/src/components/mobile-terminal-wrapper.tsx b/apps/web/src/components/mobile-terminal-wrapper.tsx index a6b827b..94479af 100644 --- a/apps/web/src/components/mobile-terminal-wrapper.tsx +++ b/apps/web/src/components/mobile-terminal-wrapper.tsx @@ -39,6 +39,13 @@ export const MobileTerminalWrapper: React.FC = ({ keysAutoHide.toggle(); }, [headerAutoHide, keysAutoHide]); + const handleTerminalReady = useCallback( + (sendData: (data: string) => void, connectionStatus: "connecting" | "connected" | "disconnected" | "error") => { + setTerminalRef({ sendData, connectionStatus }); + }, + [] + ); + const handleSendKey = useCallback( (data: string) => { terminalRef?.sendData(data); @@ -78,9 +85,7 @@ export const MobileTerminalWrapper: React.FC = ({ instanceId={instanceId} onClose={onClose} isMobile={true} - onTerminalReady={(sendData, connectionStatus) => - setTerminalRef({ sendData, connectionStatus }) - } + onTerminalReady={handleTerminalReady} /> diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx index bd178cc..1e0d62c 100644 --- a/apps/web/src/components/terminal.tsx +++ b/apps/web/src/components/terminal.tsx @@ -32,6 +32,8 @@ export const TerminalComponent: React.FC = ({ const termRef = useRef(null); const fitAddonRef = useRef(null); const reconnectAttemptsRef = useRef(0); + const onTerminalReadyRef = useRef(onTerminalReady); + onTerminalReadyRef.current = onTerminalReady; const [status, setStatus] = useState< "connecting" | "connected" | "disconnected" | "error" >("connecting"); @@ -188,13 +190,13 @@ export const TerminalComponent: React.FC = ({ setTimeout(handleResize, 100); // Notify parent about terminal readiness - if (onTerminalReady) { + if (onTerminalReadyRef.current) { const sendData = (data: string) => { if (ws.readyState === WebSocket.OPEN) { ws.send(data); } }; - onTerminalReady(sendData, status); + onTerminalReadyRef.current(sendData, status); } // Visibility API for reconnection @@ -213,7 +215,7 @@ export const TerminalComponent: React.FC = ({ ws.close(); term.dispose(); }; - }, [instanceId, connectWebSocket, onTerminalReady, status, calculateFontSize]); + }, [instanceId, connectWebSocket, calculateFontSize]); // Update parent about status changes useEffect(() => {