Alex Blank
555517c144
The changeFontSize callback passed to MobileTerminalWrapper was capturing the initial handleFontSizeChange function, so subsequent clicks used stale fontSize state. Fixed by wrapping handleFontSizeChange in a ref so the callback always calls the latest version.
621 lines
21 KiB
TypeScript
621 lines
21 KiB
TypeScript
import React, { useEffect, useRef, useState, useCallback } from "react";
|
|
import { Terminal } from "xterm";
|
|
import { FitAddon } from "xterm-addon-fit";
|
|
import { WebLinksAddon } from "xterm-addon-web-links";
|
|
import "xterm/css/xterm.css";
|
|
|
|
import { applyModifierToChar, type ModifierKey } from "../hooks/use-special-keys";
|
|
|
|
interface TerminalProps {
|
|
instanceId: string;
|
|
onClose?: () => void;
|
|
isMobile?: boolean;
|
|
activeModifier?: ModifierKey | null;
|
|
onModifierChange?: (modifier: ModifierKey | null) => void;
|
|
onTerminalReady?: (
|
|
sendData: (data: string) => void,
|
|
connectionStatus: "connecting" | "connected" | "disconnected" | "error" | "resetting",
|
|
focusInput: () => void,
|
|
changeFontSize: (delta: number) => void
|
|
) => void;
|
|
}
|
|
|
|
const FONT_SIZE_KEY = "terminal-font-size";
|
|
const MIN_FONT_SIZE = 6;
|
|
const MAX_FONT_SIZE = 20;
|
|
const RECONNECT_ATTEMPTS = 3;
|
|
const RECONNECT_DELAY_BASE = 1000;
|
|
|
|
export const TerminalComponent: React.FC<TerminalProps> = ({
|
|
instanceId,
|
|
onClose,
|
|
isMobile = false,
|
|
activeModifier,
|
|
onModifierChange,
|
|
onTerminalReady,
|
|
}) => {
|
|
const terminalRef = useRef<HTMLDivElement>(null);
|
|
const hiddenInputRef = useRef<HTMLInputElement>(null);
|
|
const wsRef = useRef<WebSocket | null>(null);
|
|
const termRef = useRef<Terminal | null>(null);
|
|
const fitAddonRef = useRef<FitAddon | null>(null);
|
|
const reconnectAttemptsRef = useRef(0);
|
|
const onTerminalReadyRef = useRef(onTerminalReady);
|
|
onTerminalReadyRef.current = onTerminalReady;
|
|
const handleFontSizeChangeRef = useRef<(delta: number) => void>(() => {});
|
|
const [status, setStatus] = useState<
|
|
"connecting" | "connected" | "disconnected" | "error" | "resetting"
|
|
>("connecting");
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [showResetConfirm, setShowResetConfirm] = useState(false);
|
|
const activeModifierRef = useRef(activeModifier);
|
|
activeModifierRef.current = activeModifier;
|
|
const [fontSize, setFontSize] = useState(() => {
|
|
if (typeof window === "undefined") return isMobile ? 12 : 10;
|
|
const stored = localStorage.getItem(FONT_SIZE_KEY);
|
|
return stored ? parseInt(stored, 10) : isMobile ? 12 : 10;
|
|
});
|
|
const lastPingRef = useRef<number>(0);
|
|
const heartbeatCheckRef = useRef<number | null>(null);
|
|
const isUnmountingRef = useRef(false);
|
|
|
|
const calculateFontSize = useCallback(() => {
|
|
if (!isMobile) return fontSize;
|
|
const vw = window.innerWidth;
|
|
const calculated = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, vw / 25));
|
|
return Math.round(calculated);
|
|
}, [isMobile, fontSize]);
|
|
|
|
const connectWebSocket = useCallback(() => {
|
|
const apiUrl = import.meta.env.VITE_API_BASE_URL || "";
|
|
const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
|
const wsHost = apiUrl.replace(/^https?:\/\//, "").replace(/\/+$/, "");
|
|
const wsUrl = `${wsProtocol}//${wsHost}/ws/tool-instances/${instanceId}/terminal`;
|
|
|
|
console.log(`[Terminal WS] Connecting to ${wsUrl} (attempt ${reconnectAttemptsRef.current + 1}/${RECONNECT_ATTEMPTS + 1})`);
|
|
const ws = new WebSocket(wsUrl);
|
|
wsRef.current = ws;
|
|
|
|
ws.onopen = () => {
|
|
console.log(`[Terminal WS] Connected successfully`);
|
|
setStatus("connected");
|
|
setError(null);
|
|
reconnectAttemptsRef.current = 0;
|
|
lastPingRef.current = Date.now();
|
|
|
|
// Send current terminal size immediately on connect
|
|
if (termRef.current) {
|
|
const { cols, rows } = termRef.current;
|
|
// Only send if we have valid dimensions
|
|
if (cols > 0 && rows > 0) {
|
|
ws.send(JSON.stringify({ type: "resize", cols, rows }));
|
|
}
|
|
}
|
|
|
|
// Start heartbeat check
|
|
if (heartbeatCheckRef.current) {
|
|
window.clearInterval(heartbeatCheckRef.current);
|
|
}
|
|
heartbeatCheckRef.current = window.setInterval(() => {
|
|
const elapsed = Date.now() - lastPingRef.current;
|
|
console.log(`[Terminal WS] Heartbeat check: lastPing=${elapsed}ms ago`);
|
|
if (elapsed > 60000) {
|
|
// No ping for 60 seconds, connection may be dead
|
|
console.warn("[Terminal WS] Heartbeat timeout (>60s), closing connection");
|
|
ws.close(4000, "Heartbeat timeout");
|
|
}
|
|
}, 30000);
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
if (!termRef.current) return;
|
|
|
|
if (event.data instanceof Blob) {
|
|
event.data.arrayBuffer().then((buffer) => {
|
|
const data = new Uint8Array(buffer);
|
|
termRef.current?.write(data);
|
|
});
|
|
} else if (typeof event.data === "string") {
|
|
try {
|
|
const msg = JSON.parse(event.data);
|
|
if (msg.type === "status") {
|
|
if (msg.status === "connected") {
|
|
setStatus("connected");
|
|
setError(null);
|
|
// Clear terminal and refit after reset/reconnect
|
|
if (termRef.current) {
|
|
termRef.current.clear();
|
|
requestAnimationFrame(() => {
|
|
if (fitAddonRef.current && termRef.current) {
|
|
fitAddonRef.current.fit();
|
|
const { cols, rows } = termRef.current;
|
|
const currentWs = wsRef.current;
|
|
if (currentWs?.readyState === WebSocket.OPEN) {
|
|
currentWs.send(JSON.stringify({ type: "resize", cols, rows }));
|
|
}
|
|
}
|
|
});
|
|
}
|
|
} else if (msg.status === "resetting") {
|
|
setStatus("resetting");
|
|
}
|
|
} else if (msg.type === "ping") {
|
|
// Respond with pong and update last ping time
|
|
lastPingRef.current = Date.now();
|
|
console.log(`[Terminal WS] Received ping, sending pong`);
|
|
if (ws.readyState === WebSocket.OPEN) {
|
|
ws.send(JSON.stringify({ type: "pong" }));
|
|
}
|
|
}
|
|
} catch {
|
|
termRef.current?.write(event.data);
|
|
}
|
|
}
|
|
};
|
|
|
|
ws.onclose = (event) => {
|
|
console.log(`[Terminal WS] Connection closed: code=${event.code}, reason="${event.reason}", wasClean=${event.wasClean}, attempts=${reconnectAttemptsRef.current}`);
|
|
setStatus("disconnected");
|
|
|
|
// Clean up heartbeat check
|
|
if (heartbeatCheckRef.current) {
|
|
window.clearInterval(heartbeatCheckRef.current);
|
|
heartbeatCheckRef.current = null;
|
|
}
|
|
|
|
if (event.code !== 1000 && event.code !== 4000) {
|
|
setError(`Connection closed (code: ${event.code})`);
|
|
|
|
// Attempt reconnection
|
|
if (reconnectAttemptsRef.current < RECONNECT_ATTEMPTS) {
|
|
reconnectAttemptsRef.current++;
|
|
const delay = RECONNECT_DELAY_BASE * Math.pow(2, reconnectAttemptsRef.current - 1);
|
|
console.log(`[Terminal WS] Will retry in ${delay}ms (attempt ${reconnectAttemptsRef.current}/${RECONNECT_ATTEMPTS})`);
|
|
setTimeout(() => {
|
|
if (isUnmountingRef.current) {
|
|
console.log(`[Terminal WS] Component unmounting, skipping reconnect`);
|
|
return;
|
|
}
|
|
if (document.visibilityState !== "hidden") {
|
|
connectWebSocket();
|
|
} else {
|
|
console.log(`[Terminal WS] Tab hidden, skipping reconnect`);
|
|
}
|
|
}, delay);
|
|
} else {
|
|
console.log(`[Terminal WS] Max reconnection attempts (${RECONNECT_ATTEMPTS}) reached`);
|
|
}
|
|
} else if (event.code === 4000) {
|
|
// Server closed old connection for concurrent connection - don't reconnect
|
|
// The new connection is already established
|
|
console.log(`[Terminal WS] Server closed old connection (concurrent/heartbeat)`);
|
|
}
|
|
};
|
|
|
|
ws.onerror = (error) => {
|
|
console.error(`[Terminal WS] Error event fired`, error);
|
|
setStatus("error");
|
|
setError("WebSocket error");
|
|
};
|
|
|
|
return ws;
|
|
}, [instanceId]);
|
|
|
|
useEffect(() => {
|
|
if (!terminalRef.current) return;
|
|
|
|
// Initialize terminal
|
|
const currentFontSize = calculateFontSize();
|
|
const term = new Terminal({
|
|
cursorBlink: true,
|
|
fontSize: currentFontSize,
|
|
fontFamily: 'Menlo, Monaco, "Courier New", monospace',
|
|
theme: {
|
|
background: "#1e1e1e",
|
|
foreground: "#d4d4d4",
|
|
cursor: "#d4d4d4",
|
|
selectionBackground: "#264f78",
|
|
black: "#000000",
|
|
red: "#cd3131",
|
|
green: "#0dbc79",
|
|
yellow: "#e5e510",
|
|
blue: "#2472c8",
|
|
magenta: "#bc3fbc",
|
|
cyan: "#11a8cd",
|
|
white: "#e5e5e5",
|
|
brightBlack: "#666666",
|
|
brightRed: "#f14c4c",
|
|
brightGreen: "#23d18b",
|
|
brightYellow: "#f5f543",
|
|
brightBlue: "#3b8eea",
|
|
brightMagenta: "#d670d6",
|
|
brightCyan: "#29b8db",
|
|
brightWhite: "#e5e5e5",
|
|
},
|
|
});
|
|
|
|
termRef.current = term;
|
|
|
|
const fitAddon = new FitAddon();
|
|
fitAddonRef.current = fitAddon;
|
|
term.loadAddon(fitAddon);
|
|
term.loadAddon(new WebLinksAddon());
|
|
|
|
const container = terminalRef.current;
|
|
|
|
// Define fitTerminal before connectWebSocket so it's available in onmessage
|
|
const fitTerminal = () => {
|
|
if (!fitAddonRef.current || !termRef.current) return;
|
|
const oldCols = termRef.current.cols;
|
|
const oldRows = termRef.current.rows;
|
|
try {
|
|
fitAddonRef.current.fit();
|
|
} catch {
|
|
// Ignore fit errors during initialization
|
|
return;
|
|
}
|
|
const { cols, rows } = termRef.current;
|
|
console.log(`[Terminal] fit() result: ${cols}x${rows} (was ${oldCols}x${oldRows})`);
|
|
// Force refresh if dimensions are valid
|
|
if (cols > 0 && rows > 0) {
|
|
try {
|
|
termRef.current.refresh(0, rows - 1);
|
|
} catch {
|
|
// Ignore refresh errors
|
|
}
|
|
}
|
|
const currentWs = wsRef.current;
|
|
if (currentWs?.readyState === WebSocket.OPEN && cols > 0 && rows > 0) {
|
|
currentWs.send(JSON.stringify({ type: "resize", cols, rows }));
|
|
}
|
|
};
|
|
|
|
// Open xterm first (must happen before fit)
|
|
term.open(container);
|
|
const ws = connectWebSocket();
|
|
|
|
// Initial fit after layout settles (terminal must be opened first)
|
|
let fitAttempts = 0;
|
|
const doInitialFit = () => {
|
|
if (!container.isConnected) return;
|
|
fitAttempts++;
|
|
// Ensure container has dimensions before fitting
|
|
if (container.clientWidth > 0 && container.clientHeight > 0) {
|
|
console.log(`[Terminal] Container ready: ${container.clientWidth}x${container.clientHeight} (attempt ${fitAttempts})`);
|
|
fitTerminal();
|
|
} else if (fitAttempts < 50) {
|
|
// Container not ready yet, try again (max 50 attempts ~ 1s)
|
|
console.log(`[Terminal] Container not ready: ${container.clientWidth}x${container.clientHeight} (attempt ${fitAttempts})`);
|
|
requestAnimationFrame(doInitialFit);
|
|
} else {
|
|
console.warn(`[Terminal] Container never got dimensions after ${fitAttempts} attempts`);
|
|
}
|
|
};
|
|
requestAnimationFrame(doInitialFit);
|
|
|
|
// Refit after font load (metrics may change)
|
|
document.fonts.ready.then(() => {
|
|
requestAnimationFrame(() => fitTerminal());
|
|
});
|
|
|
|
// Handle terminal input
|
|
term.onData((data) => {
|
|
const currentWs = wsRef.current;
|
|
if (currentWs?.readyState !== WebSocket.OPEN) return;
|
|
|
|
// Apply active modifier to single-character input
|
|
const modifier = activeModifierRef.current;
|
|
if (modifier && data.length === 1) {
|
|
const modified = applyModifierToChar(data, modifier);
|
|
if (modified) {
|
|
currentWs.send(modified);
|
|
onModifierChange?.(null);
|
|
return;
|
|
}
|
|
}
|
|
|
|
currentWs.send(data);
|
|
});
|
|
|
|
// Handle container resize with ResizeObserver for accurate dimension tracking
|
|
let resizeTimeout: ReturnType<typeof setTimeout>;
|
|
let lastWidth = 0;
|
|
let lastHeight = 0;
|
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
const entry = entries[0];
|
|
if (!entry) return;
|
|
|
|
const { width, height } = entry.contentRect;
|
|
// Only trigger if dimensions actually changed
|
|
if (width === lastWidth && height === lastHeight) return;
|
|
lastWidth = width;
|
|
lastHeight = height;
|
|
|
|
clearTimeout(resizeTimeout);
|
|
resizeTimeout = setTimeout(() => {
|
|
requestAnimationFrame(() => {
|
|
if (!container.isConnected) return;
|
|
fitTerminal();
|
|
});
|
|
}, 50);
|
|
});
|
|
resizeObserver.observe(container);
|
|
|
|
// Window resize fallback (for viewport changes that don't affect container dimensions)
|
|
let windowResizeTimeout: ReturnType<typeof setTimeout>;
|
|
const handleWindowResize = () => {
|
|
clearTimeout(windowResizeTimeout);
|
|
windowResizeTimeout = setTimeout(() => {
|
|
requestAnimationFrame(() => fitTerminal());
|
|
}, 250);
|
|
};
|
|
window.addEventListener("resize", handleWindowResize);
|
|
|
|
// Refit after mobile header auto-hides (3s delay + 0.3s transition)
|
|
const headerHideTimeout = setTimeout(() => {
|
|
fitTerminal();
|
|
}, 4000);
|
|
|
|
// Notify parent about terminal readiness
|
|
if (onTerminalReadyRef.current) {
|
|
const sendData = (data: string) => {
|
|
const currentWs = wsRef.current;
|
|
if (currentWs?.readyState === WebSocket.OPEN) {
|
|
currentWs.send(data);
|
|
}
|
|
};
|
|
const focusInput = () => {
|
|
termRef.current?.focus();
|
|
};
|
|
const changeFontSize = (delta: number) => {
|
|
handleFontSizeChangeRef.current(delta);
|
|
};
|
|
onTerminalReadyRef.current(sendData, status, focusInput, changeFontSize);
|
|
}
|
|
|
|
// Visibility API for reconnection
|
|
const handleVisibilityChange = () => {
|
|
console.log(`[Terminal WS] Visibility changed to: ${document.visibilityState}, wsState=${ws?.readyState}`);
|
|
if (document.visibilityState === "visible" && ws && ws.readyState !== WebSocket.OPEN) {
|
|
console.log(`[Terminal WS] Tab visible, resetting reconnect attempts and reconnecting`);
|
|
reconnectAttemptsRef.current = 0;
|
|
connectWebSocket();
|
|
}
|
|
};
|
|
document.addEventListener("visibilitychange", handleVisibilityChange);
|
|
|
|
return () => {
|
|
isUnmountingRef.current = true;
|
|
clearTimeout(resizeTimeout);
|
|
clearTimeout(windowResizeTimeout);
|
|
clearTimeout(headerHideTimeout);
|
|
resizeObserver.disconnect();
|
|
window.removeEventListener("resize", handleWindowResize);
|
|
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
|
if (ws) {
|
|
ws.close(1000, "Component unmounting");
|
|
}
|
|
if (heartbeatCheckRef.current) {
|
|
window.clearInterval(heartbeatCheckRef.current);
|
|
heartbeatCheckRef.current = null;
|
|
}
|
|
term.dispose();
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [instanceId, connectWebSocket]);
|
|
|
|
// Update parent about status changes
|
|
useEffect(() => {
|
|
if (onTerminalReady && termRef.current) {
|
|
const sendData = (data: string) => {
|
|
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
|
wsRef.current.send(data);
|
|
}
|
|
};
|
|
const focusInput = () => {
|
|
termRef.current?.focus();
|
|
};
|
|
const changeFontSize = (delta: number) => {
|
|
handleFontSizeChangeRef.current(delta);
|
|
};
|
|
onTerminalReady(sendData, status, focusInput, changeFontSize);
|
|
}
|
|
}, [status, onTerminalReady]);
|
|
|
|
const handleFontSizeChange = (delta: number) => {
|
|
const newSize = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, fontSize + delta));
|
|
setFontSize(newSize);
|
|
localStorage.setItem(FONT_SIZE_KEY, newSize.toString());
|
|
if (termRef.current && fitAddonRef.current) {
|
|
termRef.current.options.fontSize = newSize;
|
|
requestAnimationFrame(() => {
|
|
if (termRef.current && fitAddonRef.current) {
|
|
try {
|
|
fitAddonRef.current.fit();
|
|
const { cols, rows } = termRef.current;
|
|
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
|
wsRef.current.send(
|
|
JSON.stringify({
|
|
type: "resize",
|
|
cols,
|
|
rows,
|
|
})
|
|
);
|
|
}
|
|
} catch {
|
|
// Ignore fit errors during re-initialization
|
|
}
|
|
}
|
|
});
|
|
}
|
|
};
|
|
handleFontSizeChangeRef.current = handleFontSizeChange;
|
|
|
|
const handleCopy = async () => {
|
|
if (!termRef.current) return;
|
|
const selection = termRef.current.getSelection();
|
|
if (selection) {
|
|
try {
|
|
await navigator.clipboard.writeText(selection);
|
|
} catch {
|
|
// Fallback for older browsers
|
|
const textarea = document.createElement("textarea");
|
|
textarea.value = selection;
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
document.execCommand("copy");
|
|
document.body.removeChild(textarea);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handlePaste = async () => {
|
|
try {
|
|
const text = await navigator.clipboard.readText();
|
|
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
|
wsRef.current.send(text);
|
|
}
|
|
} catch {
|
|
// Clipboard API not available
|
|
}
|
|
};
|
|
|
|
// Focus terminal on mobile to keep keyboard open
|
|
const handleTerminalClick = () => {
|
|
if (isMobile && termRef.current) {
|
|
termRef.current.focus();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={`terminal-wrapper ${isMobile ? "mobile" : ""}`}>
|
|
<div className="terminal-header">
|
|
<div className="terminal-header-left">
|
|
<div className="terminal-status">
|
|
<span
|
|
className={`status-dot ${status}`}
|
|
aria-label={`Terminal status: ${status}`}
|
|
/>
|
|
<span className="status-text">
|
|
{status === "resetting"
|
|
? "Resetting..."
|
|
: reconnectAttemptsRef.current > 0 && status !== "connected"
|
|
? `Reconnecting (${reconnectAttemptsRef.current}/${RECONNECT_ATTEMPTS})...`
|
|
: status}
|
|
</span>
|
|
</div>
|
|
{isMobile && (
|
|
<>
|
|
<button
|
|
className="terminal-header-button"
|
|
onClick={handleCopy}
|
|
type="button"
|
|
aria-label="Copy selection"
|
|
>
|
|
Copy
|
|
</button>
|
|
<button
|
|
className="terminal-header-button"
|
|
onClick={handlePaste}
|
|
type="button"
|
|
aria-label="Paste from clipboard"
|
|
>
|
|
Paste
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="terminal-header-right">
|
|
<button
|
|
className="terminal-header-button"
|
|
onClick={() => handleFontSizeChange(-1)}
|
|
type="button"
|
|
aria-label="Decrease font size"
|
|
>
|
|
A-
|
|
</button>
|
|
<button
|
|
className="terminal-header-button"
|
|
onClick={() => handleFontSizeChange(1)}
|
|
type="button"
|
|
aria-label="Increase font size"
|
|
>
|
|
A+
|
|
</button>
|
|
<button
|
|
className="terminal-header-button"
|
|
onClick={() => setShowResetConfirm(true)}
|
|
type="button"
|
|
aria-label="Reset terminal"
|
|
>
|
|
Reset
|
|
</button>
|
|
{onClose && (
|
|
<button className="terminal-close" onClick={onClose} type="button">
|
|
Close
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{showResetConfirm && (
|
|
<div className="terminal-reset-confirm">
|
|
<div className="terminal-reset-confirm-content">
|
|
<p>Reset terminal? This will kill the current shell session and start fresh.</p>
|
|
<div className="terminal-reset-confirm-buttons">
|
|
<button
|
|
className="terminal-reset-confirm-button cancel"
|
|
onClick={() => setShowResetConfirm(false)}
|
|
type="button"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
className="terminal-reset-confirm-button confirm"
|
|
onClick={() => {
|
|
setShowResetConfirm(false);
|
|
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
|
wsRef.current.send(JSON.stringify({ type: "reset" }));
|
|
}
|
|
}}
|
|
type="button"
|
|
>
|
|
Reset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{error && (
|
|
<div className="terminal-error">
|
|
{error}
|
|
{status === "error" && (
|
|
<button
|
|
className="terminal-reconnect"
|
|
onClick={() => {
|
|
reconnectAttemptsRef.current = 0;
|
|
connectWebSocket();
|
|
}}
|
|
type="button"
|
|
>
|
|
Reconnect
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div
|
|
ref={terminalRef}
|
|
className="terminal-container"
|
|
onClick={handleTerminalClick}
|
|
/>
|
|
{isMobile && (
|
|
<input
|
|
ref={hiddenInputRef}
|
|
type="text"
|
|
className="terminal-hidden-input"
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|