Update frontend/src/components/Terminal.tsx

frontend/src/components/Terminal.tsx

@@ -1,7 +1,35 @@
-import React from 'react';
-const Terminal: React.FC = () => (
-  <div style={{ flex: 1, background: '#000', color: '#0f0', padding: 10 }}>
-    <pre>$ _</pre>
-  </div>
-);
+import React, { useEffect, useRef } from 'react';
+import { Terminal as XTerm } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+import 'xterm/css/xterm.css';
+
+const Terminal: React.FC = () => {
+  const termRef = useRef<HTMLDivElement>(null);
+  const xterm = useRef<XTerm>();
+  const ws = useRef<WebSocket>();
+
+  useEffect(() => {
+    const term = new XTerm({ cursorBlink: true, theme: { background: '#1e1e1e' } });
+    const fit = new FitAddon();
+    term.loadAddon(fit);
+    if (termRef.current) {
+      term.open(termRef.current);
+      fit.fit();
+      xterm.current = term;
+    }
+    // Connect WebSocket to /ws/terminal
+    const socket = new WebSocket(`wss://${window.location.host}/ws/terminal`);
+    ws.current = socket;
+    socket.onmessage = (event) => {
+      term.write(event.data);
+    };
+    term.onData(data => {
+      socket.send(`exec:${data}`);
+    });
+    return () => { socket.close(); term.dispose(); };
+  }, []);
+
+  return <div ref={termRef} style={{ height: '100%', width: '100%' }} />;
+};
+
 export default Terminal;