@benzsiangco/jarvis 1.0.0 → 1.1.0

package/src/web/ui/src/components/Modules/Terminal/TabbedTerminal.tsx

@@ -0,0 +1,202 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Terminal as XTerm } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+import { X, Plus, Terminal as LucideTerminal, Trash2, Skull, MousePointer2 } from 'lucide-react';
+import 'xterm/css/xterm.css';
+
+interface TerminalTab {
+  id: string;
+  name: string;
+}
+
+export function TabbedTerminal({ onClose }: { onClose: () => void }) {
+  const [tabs, setTabs] = useState<TerminalTab[]>([{ id: 'default', name: 'Primary Core' }]);
+  const [activeTabId, setActiveTabId] = useState('default');
+  const instanceRefs = useRef<Record<string, { kill: () => void, clear: () => void }>>({});
+  
+  const addTab = () => {
+    const id = 'term-' + Date.now();
+    setTabs(prev => [...prev, { id, name: `Segment ${prev.length + 1}` }]);
+    setActiveTabId(id);
+  };
+
+  const closeTab = (id: string) => {
+    if (tabs.length === 1) {
+      onClose();
+      return;
+    }
+    const updatedTabs = tabs.filter(t => t.id !== id);
+    setTabs(updatedTabs);
+    if (activeTabId === id) setActiveTabId(updatedTabs[0]?.id || 'default');
+  };
+
+  const handleKill = () => {
+    instanceRefs.current[activeTabId]?.kill();
+  };
+
+  const handleClear = () => {
+    instanceRefs.current[activeTabId]?.clear();
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-zinc-950 border-t border-zinc-900 shadow-2xl overflow-hidden relative">
+      <div className="h-10 bg-zinc-900/80 backdrop-blur-md flex items-center justify-between px-4 border-b border-zinc-800 shrink-0">
+        <div className="flex items-center gap-0.5 h-full overflow-x-auto no-scrollbar">
+          {tabs.map(tab => (
+            <button 
+              key={tab.id}
+              onClick={() => setActiveTabId(tab.id)}
+              className={`px-5 h-full flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest border-r border-zinc-800/50 transition-all ${
+                activeTabId === tab.id ? 'bg-zinc-950 text-white border-b-2 border-b-cyan-500 shadow-inner' : 'text-zinc-500 hover:bg-zinc-800/50 hover:text-zinc-400'
+              }`}
+            >
+              <LucideTerminal size={12} className={activeTabId === tab.id ? "text-cyan-500" : "text-zinc-700"} />
+              <span>{tab.name}</span>
+              <X 
+                size={10} 
+                className="ml-3 opacity-0 group-hover:opacity-100 hover:text-red-500 transition-all" 
+                onClick={(e) => { e.stopPropagation(); closeTab(tab.id); }} 
+              />
+            </button>
+          ))}
+          <button onClick={addTab} className="px-4 h-full text-zinc-600 hover:text-white hover:bg-zinc-800 transition-colors border-r border-zinc-800/50">
+            <Plus size={16} />
+          </button>
+        </div>
+        
+        <div className="flex items-center gap-4">
+           <button 
+             onClick={handleKill}
+             className="flex items-center gap-1.5 px-3 py-1 rounded-md bg-red-500/10 text-red-500 hover:bg-red-500/20 transition-all text-[9px] font-black uppercase tracking-widest border border-red-500/20 active:scale-95"
+           >
+              <Skull size={10} /> Abort Task
+           </button>
+           <button 
+             onClick={handleClear}
+             className="text-[9px] font-black uppercase tracking-widest text-zinc-600 hover:text-zinc-300 transition-colors italic"
+           >
+              Wipe Buffer
+           </button>
+           <div className="w-px h-4 bg-zinc-800 mx-2" />
+           <button onClick={onClose} className="p-1 text-zinc-600 hover:text-white transition-all active:scale-90"><X size={18} /></button>
+        </div>
+      </div>
+
+      <div className="flex-1 relative overflow-hidden bg-zinc-950/50 backdrop-blur-sm">
+        {tabs.map(tab => (
+          <TerminalInstance 
+            key={tab.id} 
+            visible={activeTabId === tab.id} 
+            onRegister={(actions) => { instanceRefs.current[tab.id] = actions; }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TerminalInstance({ visible, onRegister }: { visible: boolean, onRegister: (actions: { kill: () => void, clear: () => void }) => void }) {
+  const terminalRef = useRef<HTMLDivElement>(null);
+  const xtermRef = useRef<XTerm | null>(null);
+  const socketRef = useRef<WebSocket | null>(null);
+  const fitAddonRef = useRef<FitAddon | null>(null);
+
+  const kill = useCallback(() => {
+    if (socketRef.current?.readyState === WebSocket.OPEN) {
+      socketRef.current.send(JSON.stringify({ action: 'kill' }));
+    }
+  }, []);
+
+  const clear = useCallback(() => {
+    xtermRef.current?.clear();
+    xtermRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    onRegister({ kill, clear });
+  }, [kill, clear, onRegister]);
+
+  useEffect(() => {
+    if (!terminalRef.current || xtermRef.current) return;
+
+    const term = new XTerm({
+      theme: { background: 'transparent', foreground: '#d4d4d8', cursor: '#06b6d4' },
+      fontFamily: '"JetBrains Mono", "Cascadia Code", monospace',
+      fontSize: 13,
+      cursorBlink: true,
+      allowTransparency: true,
+      lineHeight: 1.4,
+      scrollback: 5000
+    });
+
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+    term.open(terminalRef.current);
+    
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const socket = new WebSocket(`${protocol}//${window.location.host}/terminal`);
+    socket.binaryType = 'arraybuffer';
+
+    socket.onopen = () => {
+      setTimeout(() => {
+        if (term && socket.readyState === WebSocket.OPEN) {
+          socket.send(JSON.stringify({ resize: { cols: term.cols, rows: term.rows } }));
+        }
+      }, 500);
+    };
+
+    socket.onmessage = (ev) => {
+      if (typeof ev.data === 'string') term.write(ev.data);
+      else term.write(new Uint8Array(ev.data));
+    };
+
+    term.onData(data => {
+      if (socket.readyState === WebSocket.OPEN) socket.send(data);
+    });
+    
+    term.onResize(size => {
+      if (socket.readyState === WebSocket.OPEN) {
+        socket.send(JSON.stringify({ resize: { cols: size.cols, rows: size.rows } }));
+      }
+    });
+
+    xtermRef.current = term;
+    socketRef.current = socket;
+    fitAddonRef.current = fitAddon;
+
+    const onResize = () => {
+       try { fitAddon.fit(); } catch(e) {}
+    };
+    window.addEventListener('resize', onResize);
+    
+    setTimeout(() => {
+      onResize();
+      if (visible) term.focus();
+    }, 200);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+      term.dispose();
+      socket.close();
+      xtermRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (visible && xtermRef.current) {
+      xtermRef.current.focus();
+      setTimeout(() => fitAddonRef.current?.fit(), 100);
+    }
+  }, [visible]);
+
+  return (
+    <div 
+      ref={terminalRef} 
+      className={`absolute inset-0 p-4 transition-opacity duration-300 cursor-text ${visible ? 'opacity-100 z-10' : 'opacity-0 -z-10 pointer-events-none'}`} 
+      onMouseDown={(e) => {
+        e.stopPropagation();
+        xtermRef.current?.focus();
+      }}
+    />
+  );
+}