Update frontend/src/components/Terminal.tsx

frontend/src/components/Terminal.tsx

@@ -1,22 +1,25 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Terminal as XTerm } from 'xterm';
+
+# Fixed Terminal.tsx
+terminal_tsx = '''import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { XTerm } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import 'xterm/css/xterm.css';
-import { FaPlus, FaTimes } from 'react-icons/fa';
 
 interface Tab {
   id: number;
   terminal: XTerm;
   socket: WebSocket;
+  fitAddon: FitAddon;
 }
 
 const TerminalTabs: React.FC = () => {
   const [tabs, setTabs] = useState<Tab[]>([]);
-  const [activeTab, setActiveTab] = useState(0);
+  const [activeTab, setActiveTab] = useState<number>(0);
   const termRefs = useRef<Map<number, HTMLDivElement>>(new Map());
   const nextId = useRef(1);
+  const resizeHandlerRef = useRef<(() => void) | null>(null);
 
-  const createTerminal = () => {
+  const createTerminal = useCallback(() => {
     const id = nextId.current++;
     const term = new XTerm({
       cursorBlink: true,
@@ -35,87 +38,207 @@ const TerminalTabs: React.FC = () => {
       },
       fontSize: 13,
       fontFamily: 'monospace',
+      rows: 24,
+      cols: 80,
     });
-    const fit = new FitAddon();
-    term.loadAddon(fit);
+
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const socket = new WebSocket(`${protocol}//${window.location.host}/ws/terminal`);
-    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]);
+
+    socket.onopen = () => {
+      term.writeln('\\r\\n\\x1b[32mConnected to terminal\\x1b[0m\\r\\n');
+    };
+
+    socket.onmessage = (event) => {
+      term.write(event.data);
+    };
+
+    socket.onerror = (e) => {
+      term.writeln('\\r\\n\\x1b[31mConnection error\\x1b[0m\\r\\n');
+    };
+
+    socket.onclose = () => {
+      term.writeln('\\r\\n\\x1b[33mDisconnected\\x1b[0m\\r\\n');
+    };
+
+    term.onData((data) => {
+      if (socket.readyState === WebSocket.OPEN) {
+        socket.send(`exec:${data}`);
+      }
+    });
+
+    const newTab: Tab = { id, terminal: term, socket, fitAddon };
+    setTabs((prev) => [...prev, newTab]);
     setActiveTab(id);
-    return { term, socket, fit };
-  };
+    return newTab;
+  }, []);
 
+  // Create initial terminal
   useEffect(() => {
-    // Create initial terminal
-    createTerminal();
+    if (tabs.length === 0) {
+      createTerminal();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Mount terminal to DOM when active tab changes
   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());
-      }
+    const tab = tabs.find((t) => t.id === activeTab);
+    if (!tab) return;
+
+    const container = termRefs.current.get(tab.id);
+    if (!container) return;
+
+    // Only open if not already open
+    if (!tab.terminal.element) {
+      tab.terminal.open(container);
+      tab.fitAddon.fit();
+
+      // Handle resize
+      const handleResize = () => {
+        tab.fitAddon.fit();
+      };
+      resizeHandlerRef.current = handleResize;
+      window.addEventListener('resize', handleResize);
+
+      return () => {
+        window.removeEventListener('resize', handleResize);
+      };
     }
   }, [activeTab, tabs]);
 
   const removeTab = (id: number) => {
-    const tab = tabs.find(t => t.id === id);
-    if (tab) {
+    const tab = tabs.find((t) => t.id === id);
+    if (!tab) return;
+
+    // Clean up
+    if (tab.socket.readyState === WebSocket.OPEN || tab.socket.readyState === WebSocket.CONNECTING) {
       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);
+    }
+    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);
       }
     }
   };
 
+  const activeTabIndex = tabs.findIndex((t) => t.id === activeTab);
+
   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 style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {/* Tab Bar */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          background: '#161b22',
+          borderBottom: '1px solid #30363d',
+          overflowX: 'auto',
+        }}
+      >
+        {tabs.map((tab, idx) => (
+          <div
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            style={{
+              padding: '6px 14px',
+              cursor: 'pointer',
+              background: activeTab === tab.id ? '#0d1117' : 'transparent',
+              borderRight: '1px solid #30363d',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              fontSize: 12,
+              color: activeTab === tab.id ? '#c9d1d9' : '#8b949e',
+              whiteSpace: 'nowrap',
+              userSelect: 'none',
+            }}
+          >
+            <span>Terminal {idx + 1}</span>
+            <span
+              onClick={(e) => {
+                e.stopPropagation();
+                removeTab(tab.id);
+              }}
+              style={{
+                opacity: 0.5,
+                cursor: 'pointer',
+                fontSize: 14,
+                lineHeight: 1,
+              }}
+              onMouseEnter={(e) => (e.currentTarget.style.opacity = '1')}
+              onMouseLeave={(e) => (e.currentTarget.style.opacity = '0.5')}
+            >
+              ×
+            </span>
           </div>
         ))}
-        <button onClick={() => createTerminal()} style={{ padding: '4px 8px', color: 'var(--text-secondary)' }}>
-          <FaPlus size={12} />
+        <button
+          onClick={() => createTerminal()}
+          style={{
+            padding: '6px 12px',
+            background: 'transparent',
+            border: 'none',
+            color: '#8b949e',
+            cursor: 'pointer',
+            fontSize: 16,
+            lineHeight: 1,
+          }}
+          title="New Terminal"
+        >
+          +
         </button>
       </div>
-      <div style={{ flex: 1, position: 'relative' }}>
-        {tabs.map(tab => (
+
+      {/* Terminal Containers */}
+      <div style={{ flex: 1, position: 'relative', background: '#0d1117' }}>
+        {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' }}
+            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',
+              padding: 4,
+            }}
           />
         ))}
+        {tabs.length === 0 && (
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '100%',
+              color: '#8b949e',
+              fontSize: 14,
+            }}
+          >
+            No terminals open. Click + to create one.
+          </div>
+        )}
       </div>
     </div>
   );
 };
 
-export default TerminalTabs;
+export default TerminalTabs;
+'''
+
+with open('/mnt/agents/output/Terminal.tsx', 'w') as f:
+    f.write(terminal_tsx)
+print("Terminal.tsx written successfully")