Update frontend/src/components/Terminal.tsx

frontend/src/components/Terminal.tsx

@@ -1,21 +1,29 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Terminal as XTerm } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import 'xterm/css/xterm.css';
+import { FaPlus, FaTimes } from 'react-icons/fa';
 
-const Terminal: React.FC = () => {
-  const termRef = useRef<HTMLDivElement>(null);
-  const xterm = useRef<XTerm>();
-  const ws = useRef<WebSocket>();
+interface Tab {
+  id: number;
+  terminal: XTerm;
+  socket: WebSocket;
+}
 
-  useEffect(() => {
+const TerminalTabs: React.FC = () => {
+  const [tabs, setTabs] = useState<Tab[]>([]);
+  const [activeTab, setActiveTab] = useState(0);
+  const termRefs = useRef<Map<number, HTMLDivElement>>(new Map());
+  const nextId = useRef(1);
+
+  const createTerminal = () => {
+    const id = nextId.current++;
     const term = new XTerm({
       cursorBlink: true,
       theme: {
         background: '#0d1117',
         foreground: '#c9d1d9',
         cursor: '#58a6ff',
-        // 'selection' is not in the typings of the installed xterm version; removed.
         black: '#484f58',
         red: '#f85149',
         green: '#3fb950',
@@ -30,25 +38,84 @@ const Terminal: React.FC = () => {
     });
     const fit = new FitAddon();
     term.loadAddon(fit);
-    if (termRef.current) {
-      term.open(termRef.current);
-      fit.fit();
-      xterm.current = term;
-    }
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const socket = new WebSocket(`${protocol}//${window.location.host}/ws/terminal`);
-    ws.current = socket;
-    socket.onmessage = (event) => {
-      term.write(event.data);
-    };
-    term.onData(data => {
-      socket.send(`exec:${data}`);
-    });
-    window.addEventListener('resize', () => fit.fit());
-    return () => { socket.close(); term.dispose(); window.removeEventListener('resize', () => {}); };
+    term.onData(data => socket.send(`exec:${data}`));
+    socket.onmessage = (event) => term.write(event.data);
+    const newTab: Tab = { id, terminal: term, socket };
+    setTabs(prev => [...prev, newTab]);
+    setActiveTab(id);
+    return { term, socket, fit };
+  };
+
+  useEffect(() => {
+    // Create initial terminal
+    createTerminal();
   }, []);
 
-  return <div ref={termRef} style={{ height: '100%', width: '100%', background: '#0d1117' }} />;
+  useEffect(() => {
+    const tab = tabs.find(t => t.id === activeTab);
+    if (tab) {
+      const container = termRefs.current.get(tab.id);
+      if (container && !tab.terminal.element) {
+        tab.terminal.open(container);
+        const fitAddon = new FitAddon();
+        tab.terminal.loadAddon(fitAddon);
+        fitAddon.fit();
+        window.addEventListener('resize', () => fitAddon.fit());
+      }
+    }
+  }, [activeTab, tabs]);
+
+  const removeTab = (id: number) => {
+    const tab = tabs.find(t => t.id === id);
+    if (tab) {
+      tab.socket.close();
+      tab.terminal.dispose();
+      setTabs(prev => prev.filter(t => t.id !== id));
+      if (activeTab === id) {
+        const remaining = tabs.filter(t => t.id !== id);
+        if (remaining.length > 0) setActiveTab(remaining[0].id);
+      }
+    }
+  };
+
+  return (
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#0d1117' }}>
+      <div style={{ display: 'flex', background: 'var(--bg-tertiary)', borderBottom: '1px solid var(--border)' }}>
+        {tabs.map(tab => (
+          <div key={tab.id}
+               onClick={() => setActiveTab(tab.id)}
+               style={{
+                 padding: '4px 12px',
+                 cursor: 'pointer',
+                 background: activeTab === tab.id ? 'var(--bg-primary)' : 'transparent',
+                 borderRight: '1px solid var(--border)',
+                 display: 'flex',
+                 alignItems: 'center',
+                 gap: 6,
+                 fontSize: 12,
+                 color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-secondary)',
+               }}>
+            <span>Terminal {tab.id}</span>
+            <FaTimes size={10} onClick={(e) => { e.stopPropagation(); removeTab(tab.id); }} style={{ opacity: 0.6 }} />
+          </div>
+        ))}
+        <button onClick={() => createTerminal()} style={{ padding: '4px 8px', color: 'var(--text-secondary)' }}>
+          <FaPlus size={12} />
+        </button>
+      </div>
+      <div style={{ flex: 1, position: 'relative' }}>
+        {tabs.map(tab => (
+          <div
+            key={tab.id}
+            ref={el => { if (el) termRefs.current.set(tab.id, el); }}
+            style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: activeTab === tab.id ? 'block' : 'none' }}
+          />
+        ))}
+      </div>
+    </div>
+  );
 };
 
-export default Terminal;
+export default TerminalTabs;