A

webui/src/components/Terminal.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect, useRef, useImperativeHandle, forwardRef } from "react";
+import '@xterm/xterm/css/xterm.css';
+
+export interface TerminalRef {
+	write: (data: string) => void;
+	clear: () => void;
+}
+
+export const Terminal = forwardRef<TerminalRef, {}>(function Terminal(_props, ref) {
+	const terminalRef = useRef<HTMLDivElement>(null);
+	const xtermRef = useRef<any>(null);
+
+	useImperativeHandle(ref, () => ({
+		write: (data: string) => {
+			if (xtermRef.current) {
+				xtermRef.current.write(data);
+			}
+		},
+		clear: () => {
+			if (xtermRef.current) {
+				xtermRef.current.clear();
+			}
+		}
+	}));
+
+	useEffect(() => {
+		let mounted = true;
+
+		const initTerminal = async () => {
+			if (!terminalRef.current) return;
+
+			try {
+				const { Terminal } = await import('@xterm/xterm');
+
+				if (!mounted) return;
+
+				const term = new Terminal({
+					//"fontFamily": "Fantasque",
+					"rows": 24,
+					"fontSize": 16,
+					"tabStopWidth": 8,
+					"cursorBlink": true,
+					"theme": {
+						"background": "#1D1F21",
+						"foreground": "#F8F8F8",
+						"cursor": "#F8F8F2",
+						"black": "#282828",
+						"blue": "#0087AF",
+						"brightBlack": "#555555",
+						"brightBlue": "#87DFFF",
+						"brightCyan": "#28D1E7",
+						"brightGreen": "#A8FF60",
+						"brightMagenta": "#985EFF",
+						"brightRed": "#FFAA00",
+						"brightWhite": "#D0D0D0",
+						"brightYellow": "#F1FF52",
+						"cyan": "#87DFEB",
+						"green": "#B4EC85",
+						"magenta": "#BD99FF",
+						"red": "#FF6600",
+						"white": "#F8F8F8",
+						"yellow": "#FFFFB6"
+					}
+				});
+
+				term.open(terminalRef.current);
+				term.write('Terminal ready...\r\n');
+
+				xtermRef.current = term;
+			} catch (error) {
+				console.error('Failed to initialize terminal:', error);
+			}
+		};
+
+		initTerminal();
+
+		return () => {
+			mounted = false;
+			if (xtermRef.current) {
+				xtermRef.current.dispose();
+				xtermRef.current = null;
+			}
+		};
+	}, []);
+
+	return <div ref={terminalRef} style={{ height: "100%", width: "100%" }} />;
+});