import React, { useState, useEffect, useRef, useMemo } from 'react';
import { getNodeStreamUrl } from '../services/apiService';
import { Terminal } from '@xterm/xterm';
import { FitAddon } from '@xterm/addon-fit';
import '@xterm/xterm/css/xterm.css';
const NodeTerminal = ({ nodeId }) => {
const [isZoomed, setIsZoomed] = useState(false);
const [debugMode, setDebugMode] = useState(false);
const [latency, setLatency] = useState(null);
const terminalRef = useRef(null);
const wsRef = useRef(null);
const xtermRef = useRef(null);
const fitAddonRef = useRef(null);
const sessionId = useMemo(() => `terminal-${nodeId}-${Math.random().toString(36).substr(2, 9)}`, [nodeId]);
// 1. Core Terminal Engine Initialization
useEffect(() => {
const xterm = new Terminal({
cursorBlink: true,
theme: {
background: '#030712', // Matches Tailwind bg-gray-950
foreground: '#10b981', // Matches text-emerald-500 loosely
cursor: '#10b981',
cursorAccent: '#030712',
},
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
fontSize: 13,
rightClickSelectsWord: true,
scrollback: 1000,
convertEol: true,
scrollOnOutput: true,
});
const fitAddon = new FitAddon();
xterm.loadAddon(fitAddon);
xterm.open(terminalRef.current);
fitAddon.fit();
xtermRef.current = xterm;
fitAddonRef.current = fitAddon;
// Auto-refit terminal rows/cols when user resizes Chrome window
const observer = new ResizeObserver(() => fitAddon.fit());
if (terminalRef.current) {
observer.observe(terminalRef.current);
}
return () => {
observer.disconnect();
xterm.dispose();
};
}, []);
// 2. Headless WS Comm Link & Keystroke Forwarding
useEffect(() => {
const ws = new WebSocket(getNodeStreamUrl(nodeId));
wsRef.current = ws;
ws.onopen = () => {
xtermRef.current?.writeln('\x1b[32m\x1b[1m[CORTEX MESH] Stream Established — Persistent PTY Active\x1b[0m\r');
// Force initial resize sync
fitAddonRef.current?.fit();
};
ws.onmessage = (event) => {
try {
const msg = JSON.parse(event.data);
// --- 1. Periodic Latency Monitor (Pong Response) ---
if (msg.event === 'pong' && msg.client_ts) {
const rtt = Date.now() - msg.client_ts;
setLatency(rtt);
}
// --- 2. Skill Events (Terminal stdout) ---
else if (msg.event === 'skill_event' && msg.data?.type === 'output') {
// Crucial: Just blindly pipe pure PTY ANSI stdout to Xterm directly! No formatting!
xtermRef.current?.write(msg.data.data);
}
else if (msg.event === 'task_error') {
const errStr = msg.data?.stderr || JSON.stringify(msg.data);
xtermRef.current?.writeln(`\r\n\x1b[31m[ERROR] ${errStr}\x1b[0m\r`);
}
else if (debugMode) {
// Debug events visible natively inline in the terminal text
if (msg.event === 'task_start') {
xtermRef.current?.writeln(`\r\n\x1b[33m[DEBUG] task_start id=${msg.task_id || '?'}\x1b[0m\r`);
} else if (msg.event === 'task_complete') {
xtermRef.current?.writeln(`\r\n\x1b[33m[DEBUG] task_complete status=${msg.data?.status ?? '?'} id=${msg.task_id || '?'}\x1b[0m\r`);
} else if (msg.event === 'snapshot') {
xtermRef.current?.writeln(`\x1b[33m[DEBUG] snapshot status=${msg.data?.status || '?'}\x1b[0m\r`);
}
}
} catch (e) {
// Ignore raw failures
}
};
ws.onerror = () => xtermRef.current?.writeln('\r\n\x1b[31m[WebSocket connection error]\x1b[0m\r');
ws.onclose = () => xtermRef.current?.writeln('\r\n\x1b[31m[WebSocket disconnected]\x1b[0m\r');
// BIND XTERM DATA TO SOCKET
const disposableData = xtermRef.current?.onData((data) => {
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
wsRef.current.send(JSON.stringify({
action: "dispatch",
command: JSON.stringify({ tty: data }),
session_id: sessionId
}));
}
});
const disposableResize = xtermRef.current?.onResize(({ cols, rows }) => {
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
wsRef.current.send(JSON.stringify({
action: "dispatch",
command: JSON.stringify({ action: "resize", cols, rows }),
session_id: sessionId
}));
}
});
// --- PERIODIC LATENCY PING (Pulse) ---
const pingInterval = setInterval(() => {
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
wsRef.current.send(JSON.stringify({
action: "ping",
ts: Date.now()
}));
}
}, 3000);
return () => {
disposableData?.dispose();
disposableResize?.dispose();
clearInterval(pingInterval);
ws.close();
};
}, [nodeId, sessionId, debugMode]);
// Force XTerm internal Grid fit on zoom toggle
useEffect(() => {
const timeoutId = setTimeout(() => {
fitAddonRef.current?.fit();
}, 150);
return () => clearTimeout(timeoutId);
}, [isZoomed]);
const handleClear = () => {
xtermRef.current?.clear();
};
return (
<div className={`
bg-gray-950 text-gray-300 font-mono text-xs rounded-xl overflow-hidden shadow-2xl border border-gray-800 flex flex-col transition-all duration-300
${isZoomed ? 'fixed inset-4 z-[100] h-auto' : 'h-80 mt-4 relative'}
`}>
{isZoomed && <div className="fixed inset-0 bg-black/40 backdrop-blur-sm -z-10" onClick={() => setIsZoomed(false)}></div>}
{/* Title Bar */}
<div className="bg-gray-900/80 backdrop-blur px-4 py-2.5 flex justify-between items-center text-[10px] tracking-widest text-gray-400 uppercase font-bold border-b border-gray-800 flex-shrink-0">
<span className="flex items-center">
<span className="w-2 h-2 rounded-full bg-emerald-500 mr-3 animate-pulse shadow-sm shadow-emerald-500/50"></span>
<span className="text-gray-200">Interactive Console</span>
<span className="ml-3 text-gray-600 lowercase font-normal tracking-normal hidden sm:inline">— {nodeId}</span>
{latency !== null && (
<span className="ml-4 px-1.5 py-0.5 rounded bg-gray-950/80 text-[10px] text-emerald-400 font-bold tracking-widest border border-emerald-500/20 shadow-sm shadow-emerald-500/10">
{latency}ms
</span>
)}
</span>
<div className="flex items-center gap-3">
{/* Debug Mode Toggle */}
<button
onClick={() => setDebugMode(d => !d)}
title={debugMode ? 'Debug mode ON — click to disable' : 'Debug mode OFF — click to enable'}
className={`flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[9px] font-black uppercase tracking-widest transition-all border ${debugMode
? 'bg-amber-500/20 border-amber-500/50 text-amber-400 shadow shadow-amber-500/20'
: 'bg-gray-800 border-gray-700 text-gray-600 hover:text-gray-400 hover:border-gray-600'
}`}
>
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2zM9.5 8h5M9.5 11h5M9.5 14h3" />
</svg>
{debugMode ? 'Debug ON' : 'Debug'}
</button>
{/* Clear */}
<button
onClick={handleClear}
title="Clear terminal"
className="text-gray-600 hover:text-gray-400 transition-colors p-1"
>
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
{/* Zoom */}
<button
onClick={() => setIsZoomed(!isZoomed)}
title={isZoomed ? 'Exit fullscreen' : 'Fullscreen'}
className="text-gray-600 hover:text-white transition-colors p-1"
>
{isZoomed ? (
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
) : (
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 4l-5-5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg>
)}
</button>
</div>
</div>
{/* XTerm Host Area */}
{/* Note: 'h-auto' combined with 'flex-1' guarantees XTerm occupies exactly the rest of the flex parent container */}
<div
className="flex-1 w-full pl-3 pr-2 py-3 overflow-hidden bg-[#030712] rounded-b-xl"
ref={terminalRef}
/>
</div>
);
};
export default NodeTerminal;
