From 0bc497cf2914d9a4a0ffc62af0e424d5f035232d Mon Sep 17 00:00:00 2001
From: Pedro Pilla <pedropilla@gmail.com>
Date: Sun, 8 Feb 2026 12:34:15 +0000
Subject: [PATCH 1/3] feat(terminal-mgmt): integration

---
 src/components/Terminal.js          | 547 +---------------------------
 src/components/TerminalContainer.js |  35 +-
 src/hooks/useTerminal.js            | 297 +++++++--------
 src/lib/api.js                      |  42 ---
 src/package-lock.json               |  37 --
 src/package.json                    |   4 -
 6 files changed, 149 insertions(+), 813 deletions(-)

diff --git a/src/components/Terminal.js b/src/components/Terminal.js
index 4420fed..d569bd1 100644
--- a/src/components/Terminal.js
+++ b/src/components/Terminal.js
@@ -1,544 +1,13 @@
-// frontend/components/Terminal.js - Enhanced version
-import React, { useEffect, useRef, useState, useCallback } from 'react';
-import dynamic from 'next/dynamic';
-import '@xterm/xterm/css/xterm.css';
-import { Button, StatusIndicator } from './common';
+const Terminal = ({ terminalUrl }) => {
+    if (!terminalUrl) return null;
 
-// Dynamically import xterm with no SSR
-const TerminalComponent = dynamic(
-    () => {
-        return Promise.all([
-            import('@xterm/xterm'),
-            import('@xterm/addon-fit'),
-            import('@xterm/addon-web-links'),
-            import('@xterm/addon-search')
-        ]).then(([xtermModule, fitAddonModule, webLinksAddonModule, searchAddonModule]) => {
-            const Terminal = xtermModule.Terminal;
-            const FitAddon = fitAddonModule.FitAddon;
-            const WebLinksAddon = webLinksAddonModule.WebLinksAddon;
-            const SearchAddon = searchAddonModule.SearchAddon;
-
-            // Return the actual component that uses these modules
-            return ({ terminalId, onConnectionChange }) => {
-                const terminalRef = useRef(null);
-                const terminal = useRef(null);
-                const fitAddon = useRef(null);
-                const socket = useRef(null);
-                const searchAddon = useRef(null);
-                const reconnectTimeout = useRef(null);
-                const reconnectAttempts = useRef(0);
-                const eventListeners = useRef([]); // Track all event listeners
-                const isComponentMounted = useRef(true); // Track component mount state
-
-
-                const [connected, setConnected] = useState(false);
-                const [searchVisible, setSearchVisible] = useState(false);
-                const [searchTerm, setSearchTerm] = useState('');
-                const [currentSearchIndex, setCurrentSearchIndex] = useState(0);
-                const [totalSearchResults, setTotalSearchResults] = useState(0);
-
-                // Update the connectWebSocket function (around line 50)
-                const connectWebSocket = useCallback(() => {
-                    if (!isComponentMounted.current) return;
-                    if (!terminalId || !terminal.current) return;
-                    if (socket.current?.readyState === WebSocket.CONNECTING) return;
-
-                    // Disconnect existing connection first
-                    disconnectWebSocket();
-
-                    // Show connecting message
-                    terminal.current.writeln('\r\nConnecting to terminal...');
-
-                    try {
-                        const apiBaseUrl = window.__API_BASE_URL__ || 'http://localhost:8080/api/v1';
-                        const apiUrl = new URL(apiBaseUrl);
-                        const protocol = apiUrl.protocol === 'https:' ? 'wss:' : 'ws:';
-                        const host = apiUrl.host;
-                        const wsPath = `/api/v1/terminals/${terminalId}/attach`;
-                        const wsUrl = `${protocol}//${host}${wsPath}`;
-
-                        console.log(`Creating WebSocket connection to: ${wsUrl}`);
-                        socket.current = new WebSocket(wsUrl);
-
-                        // WebSocket event handlers
-                        socket.current.onopen = () => {
-                            console.log(`WebSocket connected for terminal ${terminalId}`);
-                            setConnected(true);
-                            reconnectAttempts.current = 0;
-                            if (onConnectionChange) onConnectionChange(true);
-                            terminal.current.clear();
-                            terminal.current.writeln('Connected to terminal!');
-                            terminal.current.writeln('');
-
-                            // Send initial terminal size
-                            sendTerminalSize();
-                        };
-
-                        socket.current.onclose = (event) => {
-                            if (!isComponentMounted.current) return;
-
-                            console.log(`WebSocket closed for terminal ${terminalId}`, event);
-                            setConnected(false);
-                            if (onConnectionChange) onConnectionChange(false);
-
-                            // Retry connection if not intentionally closed
-                            if (isComponentMounted.current && event.code !== 1000) {
-                                terminal.current.writeln('\r\nConnection closed. Attempting to reconnect...');
-                                scheduleReconnect();
-                            }
-                        };
-
-                        socket.current.onerror = (error) => {
-                            console.error(`WebSocket error for terminal ${terminalId}:`, error);
-                            terminal.current.writeln('\r\nConnection error. Will attempt to reconnect...');
-                        };
-
-                        socket.current.onmessage = (event) => {
-                            // Handle binary data
-                            if (event.data instanceof Blob) {
-                                const reader = new FileReader();
-                                reader.onload = () => {
-                                    terminal.current.write(new Uint8Array(reader.result));
-                                };
-                                reader.readAsArrayBuffer(event.data);
-                            } else {
-                                terminal.current.write(event.data);
-                            }
-                        };
-
-                        // Set up terminal input
-                        terminal.current.onData(data => {
-                            if (socket.current && socket.current.readyState === WebSocket.OPEN) {
-                                socket.current.send(data);
-                            }
-                        });
-                    } catch (error) {
-                        console.error('Error creating WebSocket connection:', error);
-                        terminal.current.writeln(`\r\nFailed to connect: ${error.message}`);
-                        scheduleReconnect();
-                    }
-                }, [terminalId, onConnectionChange]);
-
-                // Schedule reconnection with proper cleanup
-                const scheduleReconnect = useCallback(() => {
-                    if (!isComponentMounted.current) return;
-                    if (reconnectTimeout.current) return;
-
-                    reconnectAttempts.current++;
-                    const delay = calculateReconnectDelay();
-
-                    reconnectTimeout.current = setTimeout(() => {
-                        reconnectTimeout.current = null;
-                        if (isComponentMounted.current) {
-                            connectWebSocket();
-                        }
-                    }, delay);
-                }, [connectWebSocket]);
-
-                // Disconnect WebSocket
-                const disconnectWebSocket = useCallback(() => {
-                    if (socket.current) {
-                        socket.current.onclose = null; // Prevent auto-reconnect on intentional close
-                        socket.current.close();
-                        socket.current = null;
-                    }
-                }, []);
-
-                // Calculate reconnect delay with exponential backoff
-                const calculateReconnectDelay = useCallback(() => {
-                    const baseDelay = 1000; // 1 second
-                    const maxDelay = 120000; // 30 seconds
-                    const delay = Math.min(baseDelay * Math.pow(1.5, reconnectAttempts.current), maxDelay);
-
-                    // Add jitter to prevent thundering herd problem
-                    return delay + (Math.random() * 1000);
-                }, []);
-
-                // Send terminal size to server
-                const sendTerminalSize = useCallback(() => {
-                    if (!fitAddon.current || !socket.current || socket.current.readyState !== WebSocket.OPEN) {
-                        return;
-                    }
-
-                    try {
-                        const dims = fitAddon.current.proposeDimensions();
-                        if (!dims || !dims.cols || !dims.rows) {
-                            return;
-                        }
-
-                        // Create binary message for resize
-                        const sizeMessage = new Uint8Array(5);
-                        sizeMessage[0] = 1; // Resize message type
-                        sizeMessage[1] = dims.cols >> 8;
-                        sizeMessage[2] = dims.cols & 0xff;
-                        sizeMessage[3] = dims.rows >> 8;
-                        sizeMessage[4] = dims.rows & 0xff;
-
-                        socket.current.send(sizeMessage);
-                        console.log(`Sent terminal resize: ${dims.cols}x${dims.rows}`);
-                    } catch (error) {
-                        console.error('Error sending terminal size:', error);
-                    }
-                }, []);
-
-                // Handle search functionality
-                const performSearch = useCallback((searchForward = true) => {
-                    if (!terminal.current || !searchAddon.current || !searchTerm) return;
-
-                    try {
-                        if (searchForward) {
-                            searchAddon.current.findNext(searchTerm, {
-                                incremental: false,
-                                decorations: {
-                                    matchBackground: '#444',
-                                    matchOverviewRuler: '#888',
-                                    activeMatchBackground: '#f90',
-                                    activeMatchColorOverviewRuler: '#f90'
-                                }
-                            });
-                        } else {
-                            searchAddon.current.findPrevious(searchTerm, {
-                                incremental: false,
-                                decorations: {
-                                    matchBackground: '#444',
-                                    matchOverviewRuler: '#888',
-                                    activeMatchBackground: '#f90',
-                                    activeMatchColorOverviewRuler: '#f90'
-                                }
-                            });
-                        }
-                    } catch (error) {
-                        console.error('Search error:', error);
-                    }
-                }, [searchTerm]);
-
-                // Handle search input change
-                const handleSearchInputChange = useCallback((value) => {
-                    setSearchTerm(value);
-                    if (value) {
-                        performSearch();
-                    }
-                }, [performSearch]);
-
-                // Clear terminal
-                const clearTerminal = useCallback(() => {
-                    if (terminal.current) {
-                        terminal.current.clear();
-                        terminal.current.scrollToTop();
-                    }
-                }, []);
-
-                // Cleanup function to remove all resources
-                const cleanup = useCallback(() => {
-                    console.log('Starting terminal cleanup');
-
-                    // Clear reconnect timeout
-                    if (reconnectTimeout.current) {
-                        clearTimeout(reconnectTimeout.current);
-                        reconnectTimeout.current = null;
-                    }
-
-                    // Close WebSocket
-                    if (socket.current) {
-                        socket.current.onclose = null; // Prevent reconnection
-                        socket.current.onerror = null;
-                        socket.current.onmessage = null;
-                        socket.current.onopen = null;
-
-                        if (socket.current.readyState === WebSocket.OPEN) {
-                            socket.current.close();
-                        }
-                        socket.current = null;
-                    }
-
-                    // Remove all event listeners
-                    eventListeners.current.forEach(({ target, event, handler }) => {
-                        target.removeEventListener(event, handler);
-                    });
-                    eventListeners.current = [];
-
-                    // Dispose terminal and addons
-                    if (searchAddon.current) {
-                        searchAddon.current.dispose();
-                        searchAddon.current = null;
-                    }
-
-                    if (fitAddon.current) {
-                        fitAddon.current.dispose();
-                        fitAddon.current = null;
-                    }
-
-                    if (terminal.current) {
-                        terminal.current.dispose();
-                        terminal.current = null;
-                    }
-
-                    console.log('Terminal cleanup complete');
-                }, []);
-
-                // Add event listener with tracking
-                const addEventListenerTracked = useCallback((target, event, handler) => {
-                    target.addEventListener(event, handler);
-                    eventListeners.current.push({ target, event, handler });
-                }, []);
-
-                // Close search
-                const closeSearch = useCallback(() => {
-                    setSearchVisible(false);
-                    setSearchTerm('');
-                    if (searchAddon.current) {
-                        searchAddon.current.clearDecorations();
-                    }
-                    if (terminal.current) {
-                        terminal.current.focus();
-                    }
-                }, []);
-
-                // Initialize terminal
-                useEffect(() => {
-                    isComponentMounted.current = true;
-
-                    if (!terminalRef.current || !terminalId) return;
-                    // Create terminal instance
-                    terminal.current = new Terminal({
-                        fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-                        fontSize: 14,
-                        rows: 24,
-                        cursorBlink: true,
-                        theme: {
-                            background: '#1e1e1e',
-                            foreground: '#d4d4d4'
-                        }
-                    });
-
-                    // Create addons
-                    fitAddon.current = new FitAddon();
-                    searchAddon.current = new SearchAddon();
-                    const webLinksAddon = new WebLinksAddon();
-
-                    // Load addons
-                    terminal.current.loadAddon(fitAddon.current);
-                    terminal.current.loadAddon(searchAddon.current);
-                    terminal.current.loadAddon(webLinksAddon);
-
-                    // Handle search results
-                    searchAddon.current.onDidChangeResults(results => {
-                        setCurrentSearchIndex(results ? results.resultIndex : 0);
-                        setTotalSearchResults(results ? results.resultCount : 0);
-                    });
-
-                    // Open terminal
-                    terminal.current.open(terminalRef.current);
-
-                    // Initial fit after terminal is open
-                    setTimeout(() => {
-                        if (fitAddon.current) {
-                            try {
-                                fitAddon.current.fit();
-                                console.log('Terminal fitted successfully');
-                            } catch (error) {
-                                console.error('Terminal fit error:', error);
-                            }
-                        }
-                        connectWebSocket();
-                    }, 100);
-
-                    // Cleanup
-                    return () => {
-                        isComponentMounted.current = false;
-                        cleanup();
-                    };
-                }, [terminalId, cleanup]);
-
-                // Handle resize with tracked event listener
-                useEffect(() => {
-                    const handleResize = () => {
-                        if (!isComponentMounted.current) return;
-                        if (fitAddon.current && terminal.current) {
-                            try {
-                                fitAddon.current.fit();
-                                sendTerminalSize();
-                            } catch (error) {
-                                console.error('Resize error:', error);
-                            }
-                        }
-                    };
-
-                    addEventListenerTracked(window, 'resize', handleResize);
-
-                    return () => {
-                        // Cleanup happens in main useEffect
-                    };
-                }, [sendTerminalSize, addEventListenerTracked]);
-
-                // Handle keyboard shortcuts
-                useEffect(() => {
-                    const handleKeyDown = (e) => {
-                        if (!isComponentMounted.current) return;
-                        // Ctrl+F or Cmd+F for search
-                        if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
-                            e.preventDefault();
-                            setSearchVisible(true);
-
-                            // Focus search input after state update
-                            setTimeout(() => {
-                                const searchInput = document.getElementById('terminal-search-input');
-                                if (searchInput) searchInput.focus();
-                            }, 0);
-                        }
-
-                        // Escape to close search
-                        if (e.key === 'Escape' && searchVisible) {
-                            closeSearch();
-                        }
-                    };
-                    addEventListenerTracked(window, 'keydown', handleKeyDown);
-
-                    return () => {
-                        // Cleanup happens in main useEffect
-                    };
-                }, [searchVisible, closeSearch, addEventListenerTracked]);
-
-                return (
-                    <div className="h-full w-full flex flex-col">
-                        {/* Connection indicator */}
-                        <div className="absolute top-2 right-2 z-10 flex items-center bg-gray-900 bg-opacity-75 px-2 py-1 rounded">
-                            <StatusIndicator
-                                status={connected ? 'connected' : 'disconnected'}
-                                label={connected ? 'Connected' : 'Disconnected'}
-                                size="sm"
-                            />
-                        </div>
-
-                        {/* Search bar */}
-                        {searchVisible && (
-                            <div className="bg-gray-800 p-2 flex items-center">
-                                <input
-                                    id="terminal-search-input"
-                                    type="text"
-                                    value={searchTerm}
-                                    onChange={(e) => handleSearchInputChange(e.target.value)}
-                                    placeholder="Search..."
-                                    className="flex-1 px-3 py-1 text-sm text-white bg-gray-700 border border-gray-600 rounded-l"
-                                    onKeyPress={(e) => {
-                                        if (e.key === 'Enter') {
-                                            performSearch();
-                                        }
-                                    }}
-                                />
-                                <div className="flex items-center bg-gray-700 px-2 text-xs text-gray-300">
-                                    {totalSearchResults > 0 ? (
-                                        <span>{currentSearchIndex + 1}/{totalSearchResults}</span>
-                                    ) : (
-                                        <span>0/0</span>
-                                    )}
-                                </div>
-                                <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={() => performSearch(false)}
-                                    className="text-white hover:bg-gray-600"
-                                    title="Previous match"
-                                >
-                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 11l5-5m0 0l5 5m-5-5v12" />
-                                    </svg>
-                                </Button>
-                                <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={() => performSearch(true)}
-                                    className="text-white hover:bg-gray-600"
-                                    title="Next match"
-                                >
-                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 13l-5 5m0 0l-5-5m5 5V6" />
-                                    </svg>
-                                </Button>
-                                <Button
-                                    variant="secondary"
-                                    size="sm"
-                                    onClick={closeSearch}
-                                    className="ml-1"
-                                >
-                                    Close
-                                </Button>
-                            </div>
-                        )}
-
-                        {/* Terminal container */}
-                        <div className="flex-1 relative">
-                            <div ref={terminalRef} className="absolute inset-0" />
-                        </div>
-
-                        {/* Terminal toolbar */}
-                        <div className="bg-gray-800 p-2 flex justify-between items-center">
-                            <div className="flex space-x-2">
-                                <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={() => setSearchVisible(true)}
-                                    title="Search (Ctrl+F)"
-                                    className="text-gray-300 hover:text-white hover:bg-gray-700"
-                                    aria-label="Search terminal"
-                                >
-                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                                    </svg>
-                                </Button>
-                                <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={clearTerminal}
-                                    title="Clear terminal"
-                                    className="text-gray-300 hover:text-white hover:bg-gray-700"
-                                    aria-label="Clear terminal"
-                                >
-                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" 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>
-                            </div>
-
-                            <div className="flex items-center space-x-2">
-                                <Button
-                                    variant={connected ? 'ghost' : 'primary'}
-                                    size="sm"
-                                    onClick={connectWebSocket}
-                                    disabled={connected}
-                                    className={connected ? 'text-green-400' : ''}
-                                >
-                                    {connected ? 'Connected' : 'Reconnect'}
-                                </Button>
-                            </div>
-                        </div>
-                    </div>
-                );
-            };
-        });
-    },
-    {
-        ssr: false,
-        loading: () => (
-            <div className="flex justify-center items-center h-full bg-gray-800 text-white">
-                <div className="flex flex-col items-center">
-                    <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-white mb-2"></div>
-                    <span>Loading terminal...</span>
-                </div>
-            </div>
-        )
-    }
-);
-
-const Terminal = ({ terminalId, onConnectionChange }) => {
     return (
-        <div className="h-full w-full flex flex-col relative">
-            <TerminalComponent
-                terminalId={terminalId}
-                onConnectionChange={onConnectionChange}
-            />
-        </div>
+        <iframe
+            src={terminalUrl}
+            className="w-full h-full border-0 bg-black"
+            allow="clipboard-write; clipboard-read"
+        />
     );
 };
 
-export default Terminal;
\ No newline at end of file
+export default Terminal;
diff --git a/src/components/TerminalContainer.js b/src/components/TerminalContainer.js
index e47913c..29b5cc6 100644
--- a/src/components/TerminalContainer.js
+++ b/src/components/TerminalContainer.js
@@ -1,12 +1,8 @@
-// frontend/components/TerminalContainer.js
 import React from 'react';
 import Terminal from './Terminal';
-import { Button, LoadingState, ErrorState, StatusIndicator } from './common';
+import { Button, LoadingState, ErrorState } from './common';
 import { useTerminal } from '../hooks/useTerminal';
 
-/**
- * Container component for terminals that manages tabs using the unified useTerminal hook
- */
 const TerminalContainer = ({ sessionId }) => {
     const {
         terminals,
@@ -14,13 +10,11 @@ const TerminalContainer = ({ sessionId }) => {
         sessionStatus,
         createTerminal,
         switchTerminal,
-        handleConnectionChange,
         isSessionReady
     } = useTerminal(sessionId);
 
     return (
         <div className="h-full flex flex-col">
-            {/* Terminal tabs */}
             <div className="bg-gray-800 px-4 py-2 text-white flex overflow-x-auto">
                 <Button
                     variant={activeTerminal === 'control-plane' ? 'primary' : 'secondary'}
@@ -29,9 +23,6 @@ const TerminalContainer = ({ sessionId }) => {
                     className={`mr-2 flex items-center ${!isSessionReady ? 'opacity-50' : ''}`}
                 >
                     Control Plane
-                    {terminals['control-plane'].status === 'connected' && (
-                        <StatusIndicator status="connected" size="sm" className="ml-2" />
-                    )}
                 </Button>
 
                 <Button
@@ -41,15 +32,10 @@ const TerminalContainer = ({ sessionId }) => {
                     className={`flex items-center ${!isSessionReady ? 'opacity-50' : ''}`}
                 >
                     Worker Node
-                    {terminals['worker-node'].status === 'connected' && (
-                        <StatusIndicator status="connected" size="sm" className="ml-2" />
-                    )}
                 </Button>
             </div>
 
-            {/* Terminal content area */}
             <div className="flex-1 overflow-hidden relative">
-                {/* Session not ready state */}
                 {!isSessionReady && (
                     <div className="flex flex-col justify-center items-center h-full bg-gray-800 text-white p-4">
                         {sessionStatus.isLoading ? (
@@ -69,17 +55,12 @@ const TerminalContainer = ({ sessionId }) => {
                     </div>
                 )}
 
-                {/* Terminal content */}
                 {isSessionReady && (
                     <>
-                        {/* Control plane terminal */}
                         <div className={`absolute inset-0 transition-opacity duration-300 ${activeTerminal === 'control-plane' ? 'opacity-100 z-10' : 'opacity-0 z-0'
                             }`}>
-                            {terminals['control-plane'].id ? (
-                                <Terminal
-                                    terminalId={terminals['control-plane'].id}
-                                    onConnectionChange={(connected) => handleConnectionChange('control-plane', connected)}
-                                />
+                            {terminals['control-plane'].url ? (
+                                <Terminal terminalUrl={terminals['control-plane'].url} />
                             ) : (
                                 <div className="flex flex-col justify-center items-center h-full bg-gray-800 text-white p-4">
                                     {terminals['control-plane'].isLoading ? (
@@ -102,14 +83,10 @@ const TerminalContainer = ({ sessionId }) => {
                             )}
                         </div>
 
-                        {/* Worker node terminal */}
                         <div className={`absolute inset-0 transition-opacity duration-300 ${activeTerminal === 'worker-node' ? 'opacity-100 z-10' : 'opacity-0 z-0'
                             }`}>
-                            {terminals['worker-node'].id ? (
-                                <Terminal
-                                    terminalId={terminals['worker-node'].id}
-                                    onConnectionChange={(connected) => handleConnectionChange('worker-node', connected)}
-                                />
+                            {terminals['worker-node'].url ? (
+                                <Terminal terminalUrl={terminals['worker-node'].url} />
                             ) : (
                                 <div className="flex flex-col justify-center items-center h-full bg-gray-800 text-white p-4">
                                     {terminals['worker-node'].isLoading ? (
@@ -138,4 +115,4 @@ const TerminalContainer = ({ sessionId }) => {
     );
 };
 
-export default React.memo(TerminalContainer);
\ No newline at end of file
+export default React.memo(TerminalContainer);
diff --git a/src/hooks/useTerminal.js b/src/hooks/useTerminal.js
index c0c31be..64ef2cd 100644
--- a/src/hooks/useTerminal.js
+++ b/src/hooks/useTerminal.js
@@ -1,173 +1,146 @@
-// frontend/hooks/useTerminal.js
 import { useState, useCallback, useRef, useEffect } from 'react';
 import api from '../lib/api';
 import { useToast } from '../contexts/ToastContext';
 
 export function useTerminal(sessionId) {
-  // Terminal state management
-  const [terminals, setTerminals] = useState({
-    'control-plane': { id: null, status: 'disconnected', isLoading: false, error: null },
-    'worker-node': { id: null, status: 'disconnected', isLoading: false, error: null }
-  });
-  const [activeTerminal, setActiveTerminal] = useState('control-plane');
-  const [sessionStatus, setSessionStatus] = useState({
-    isReady: false,
-    isLoading: true,
-    message: 'Checking session status...',
-    error: null
-  });
-
-  const toast = useToast();
-  const isMounted = useRef(true);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  // Check session status
-  useEffect(() => {
-    if (!sessionId) return;
-
-    let cancelled = false;
-
-    const checkSessionStatus = async () => {
-      if (cancelled) return;
-
-      try {
-        const session = await api.sessions.get(sessionId);
-
-        if (cancelled || !isMounted.current) return;
-
-        if (session.status === 'running') {
-          setSessionStatus({
-            isReady: true,
-            isLoading: false,
-            message: 'Session is ready',
-            error: null
-          });
-        } else if (session.status === 'failed') {
-          setSessionStatus({
-            isReady: false,
-            isLoading: false,
-            message: `Session failed: ${session.statusMessage || 'Unknown error'}`,
-            error: session.statusMessage || 'Session failed'
-          });
-        } else {
-          setSessionStatus({
-            isReady: false,
-            isLoading: true,
-            message: `Session status: ${session.status}`,
-            error: null
-          });
+    const [terminals, setTerminals] = useState({
+        'control-plane': { url: null, isLoading: false, error: null },
+        'worker-node': { url: null, isLoading: false, error: null }
+    });
+    const [activeTerminal, setActiveTerminal] = useState('control-plane');
+    const [sessionStatus, setSessionStatus] = useState({
+        isReady: false,
+        isLoading: true,
+        message: 'Checking session status...',
+        error: null
+    });
+
+    const toast = useToast();
+    const isMounted = useRef(true);
+
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+
+    useEffect(() => {
+        if (!sessionId) return;
+
+        let cancelled = false;
+
+        const checkSessionStatus = async () => {
+            if (cancelled) return;
+
+            try {
+                const session = await api.sessions.get(sessionId);
+
+                if (cancelled || !isMounted.current) return;
+
+                if (session.status === 'running') {
+                    setSessionStatus({
+                        isReady: true,
+                        isLoading: false,
+                        message: 'Session is ready',
+                        error: null
+                    });
+                } else if (session.status === 'failed') {
+                    setSessionStatus({
+                        isReady: false,
+                        isLoading: false,
+                        message: `Session failed: ${session.statusMessage || 'Unknown error'}`,
+                        error: session.statusMessage || 'Session failed'
+                    });
+                } else {
+                    setSessionStatus({
+                        isReady: false,
+                        isLoading: true,
+                        message: `Session status: ${session.status}`,
+                        error: null
+                    });
+                }
+            } catch (error) {
+                if (cancelled || !isMounted.current) return;
+
+                setSessionStatus({
+                    isReady: false,
+                    isLoading: false,
+                    message: 'Unable to check session status',
+                    error: error.message || 'Unknown error'
+                });
+            }
+        };
+
+        checkSessionStatus();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [sessionId]);
+
+    const createTerminal = useCallback(async (target) => {
+        if (!sessionStatus.isReady) {
+            toast.error('Session not ready for terminal creation');
+            return null;
+        }
+
+        if (terminals[target].isLoading) {
+            return null;
         }
-      } catch (error) {
-        if (cancelled || !isMounted.current) return;
-
-        setSessionStatus({
-          isReady: false,
-          isLoading: false,
-          message: 'Unable to check session status',
-          error: error.message || 'Unknown error'
-        });
-      }
-    };
 
-    checkSessionStatus();
+        try {
+            setTerminals(prev => ({
+                ...prev,
+                [target]: { ...prev[target], isLoading: true, error: null }
+            }));
+
+            const result = await api.terminals.create(sessionId, target);
+
+            if (isMounted.current) {
+                setTerminals(prev => ({
+                    ...prev,
+                    [target]: {
+                        url: result.terminalUrl,
+                        isLoading: false,
+                        error: null
+                    }
+                }));
+
+                return result.terminalUrl;
+            }
+        } catch (error) {
+            if (isMounted.current) {
+                setTerminals(prev => ({
+                    ...prev,
+                    [target]: {
+                        ...prev[target],
+                        isLoading: false,
+                        error: error.message || `Failed to create terminal for ${target}`
+                    }
+                }));
+                toast.error(`Failed to create ${target} terminal`);
+            }
+            return null;
+        }
+    }, [sessionId, sessionStatus.isReady, terminals, toast]);
 
-    return () => {
-      cancelled = true;
-    };
-  }, [sessionId]);
+    const switchTerminal = useCallback((target) => {
+        setActiveTerminal(target);
 
-  // Create terminal session
-  const createTerminal = useCallback(async (target) => {
-    console.log(`createTerminal called for ${target}`, {
-      sessionReady: sessionStatus.isReady,
-      currentTerminalState: terminals[target]
-    });
-    if (!sessionStatus.isReady) {
-      toast.error('Session not ready for terminal creation');
-      return null;
-    }
-
-    if (terminals[target].isLoading) {
-      return null;
-    }
-
-    try {
-      setTerminals(prev => ({
-        ...prev,
-        [target]: { ...prev[target], isLoading: true, error: null }
-      }));
-
-      console.log(`Creating terminal for ${target}...`);
-      const result = await api.terminals.create(sessionId, target);
-
-      if (isMounted.current) {
-        setTerminals(prev => ({
-          ...prev,
-          [target]: {
-            id: result.terminalId,
-            status: 'connected',
-            isLoading: false,
-            error: null
-          }
-        }));
-
-        console.log(`Terminal created: ${result.terminalId}`);
-        return result.terminalId;
-      }
-    } catch (error) {
-      console.error(`Failed to create ${target} terminal:`, error);
-
-      if (isMounted.current) {
-        setTerminals(prev => ({
-          ...prev,
-          [target]: {
-            ...prev[target],
-            isLoading: false,
-            error: error.message || `Failed to create terminal for ${target}`
-          }
-        }));
-        toast.error(`Failed to create ${target} terminal`);
-      }
-      return null;
-    }
-  }, [sessionId, sessionStatus.isReady, terminals, toast]);
-
-  // Handle terminal connection status change
-  const handleConnectionChange = useCallback((target, isConnected) => {
-    if (isMounted.current) {
-      setTerminals(prev => ({
-        ...prev,
-        [target]: { ...prev[target], status: isConnected ? 'connected' : 'disconnected' }
-      }));
-    }
-  }, []);
-
-  // Switch active terminal tab
-  const switchTerminal = useCallback((target) => {
-    setActiveTerminal(target);
-
-    // Create terminal if it doesn't exist and session is ready
-    if (sessionStatus.isReady && !terminals[target].id && !terminals[target].isLoading) {
-      createTerminal(target);
-    }
-  }, [sessionStatus.isReady, terminals, createTerminal]);
-
-  return {
-    terminals,
-    activeTerminal,
-    sessionStatus,
-    createTerminal,
-    switchTerminal,
-    handleConnectionChange,
-    isSessionReady: sessionStatus.isReady
-  };
+        if (sessionStatus.isReady && !terminals[target].url && !terminals[target].isLoading) {
+            createTerminal(target);
+        }
+    }, [sessionStatus.isReady, terminals, createTerminal]);
+
+    return {
+        terminals,
+        activeTerminal,
+        sessionStatus,
+        createTerminal,
+        switchTerminal,
+        isSessionReady: sessionStatus.isReady
+    };
 }
 
-export default useTerminal;
\ No newline at end of file
+export default useTerminal;
diff --git a/src/lib/api.js b/src/lib/api.js
index c14648a..2d221f3 100644
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -237,26 +237,6 @@ class ApiClient {
             body: JSON.stringify({ target })
         }),
 
-        /**
-         * Resize a terminal
-         * @param {string} terminalId - Terminal ID
-         * @param {number} rows - Number of rows
-         * @param {number} cols - Number of columns
-         * @returns {Promise<Object>} - Success indicator
-         */
-        resize: (terminalId, rows, cols) => this.fetchWithRetry(`/terminals/${terminalId}/resize`, {
-            method: 'POST',
-            body: JSON.stringify({ rows, cols })
-        }, 1), // Only retry once for resize to avoid flooding
-
-        /**
-         * Close a terminal session
-         * @param {string} terminalId - Terminal ID
-         * @returns {Promise<null>} - Success indicator
-         */
-        close: (terminalId) => this.fetchWithRetry(`/terminals/${terminalId}`, {
-            method: 'DELETE'
-        })
     };
 
     // Task endpoints
@@ -305,28 +285,6 @@ class ApiClient {
     };
 }
 
-/**
- * Create WebSocket connection for terminal
- * @param {string} terminalId - Terminal ID
- * @returns {WebSocket} - WebSocket connection
- */
-export const createTerminalConnection = (terminalId) => {
-    // Get backend URL from environment
-    const backendUrl = process.env.API_BASE_URL || 'http://localhost:8080/api/v1';
-
-    // Parse backend URL to get host and protocol
-    const url = new URL(backendUrl);
-    const protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
-    const host = url.host;
-
-    // Create the correct WebSocket URL
-    const wsPath = `/api/v1/terminals/${terminalId}/attach`;
-    const wsUrl = `${protocol}//${host}${wsPath}`;
-
-    console.log(`Creating WebSocket connection to: ${wsUrl}`);
-    return new WebSocket(wsUrl);
-};
-
 // Create and export a singleton instance
 const api = new ApiClient();
 export default api;
\ No newline at end of file
diff --git a/src/package-lock.json b/src/package-lock.json
index 0bb24e9..8ed724c 100644
--- a/src/package-lock.json
+++ b/src/package-lock.json
@@ -8,10 +8,6 @@
             "name": "cks-frontend",
             "version": "0.1.0",
             "dependencies": {
-                "@xterm/addon-fit": "^0.10.0",
-                "@xterm/addon-search": "^0.15.0",
-                "@xterm/addon-web-links": "^0.11.0",
-                "@xterm/xterm": "^5.5.0",
                 "next": "^14.0.0",
                 "react": "^18.3.1",
                 "react-dom": "^18.3.1",
@@ -1125,39 +1121,6 @@
                 "win32"
             ]
         },
-        "node_modules/@xterm/addon-fit": {
-            "version": "0.10.0",
-            "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
-            "integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
-            "license": "MIT",
-            "peerDependencies": {
-                "@xterm/xterm": "^5.0.0"
-            }
-        },
-        "node_modules/@xterm/addon-search": {
-            "version": "0.15.0",
-            "resolved": "https://registry.npmjs.org/@xterm/addon-search/-/addon-search-0.15.0.tgz",
-            "integrity": "sha512-ZBZKLQ+EuKE83CqCmSSz5y1tx+aNOCUaA7dm6emgOX+8J9H1FWXZyrKfzjwzV+V14TV3xToz1goIeRhXBS5qjg==",
-            "license": "MIT",
-            "peerDependencies": {
-                "@xterm/xterm": "^5.0.0"
-            }
-        },
-        "node_modules/@xterm/addon-web-links": {
-            "version": "0.11.0",
-            "resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.11.0.tgz",
-            "integrity": "sha512-nIHQ38pQI+a5kXnRaTgwqSHnX7KE6+4SVoceompgHL26unAxdfP6IPqUTSYPQgSwM56hsElfoNrrW5V7BUED/Q==",
-            "license": "MIT",
-            "peerDependencies": {
-                "@xterm/xterm": "^5.0.0"
-            }
-        },
-        "node_modules/@xterm/xterm": {
-            "version": "5.5.0",
-            "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
-            "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
-            "license": "MIT"
-        },
         "node_modules/acorn": {
             "version": "8.14.1",
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
diff --git a/src/package.json b/src/package.json
index 30ba10a..1f83bd2 100644
--- a/src/package.json
+++ b/src/package.json
@@ -9,10 +9,6 @@
         "lint": "next lint"
     },
     "dependencies": {
-        "@xterm/addon-fit": "^0.10.0",
-        "@xterm/addon-search": "^0.15.0",
-        "@xterm/addon-web-links": "^0.11.0",
-        "@xterm/xterm": "^5.5.0",
         "next": "^14.0.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

From 8bac6853e288b81ec54c823dd57e684a3f4d35d5 Mon Sep 17 00:00:00 2001
From: Pedro Pilla <pedropilla@gmail.com>
Date: Sun, 8 Feb 2026 12:34:44 +0000
Subject: [PATCH 2/3] test(terminal-mgmt): against ephemeral backend

---
 kustomize/overlays/ephemeral/configmap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kustomize/overlays/ephemeral/configmap b/kustomize/overlays/ephemeral/configmap
index a5af656..46c73ea 100644
--- a/kustomize/overlays/ephemeral/configmap
+++ b/kustomize/overlays/ephemeral/configmap
@@ -1,3 +1,3 @@
 ENVIRONMENT=ephemeral
 LOG_LEVEL=DEBUG
-API_BASE_URL=https://dev.api.cks.fullstack.pw/api/v1
+API_BASE_URL=https://pr-6-cks-backend.ephemeral.fullstack.pw/api/v1

From 6351a654bab28e363771652cbf6eaea3fb0f531b Mon Sep 17 00:00:00 2001
From: Pedro Pilla <pedropilla@gmail.com>
Date: Sun, 8 Feb 2026 16:19:55 +0000
Subject: [PATCH 3/3] feat(cks): terminal tabs

---
 src/components/TerminalContainer.js | 137 +++++++++++++++++-----------
 src/hooks/useTerminal.js            | 102 ++++++++++++++-------
 2 files changed, 155 insertions(+), 84 deletions(-)

diff --git a/src/components/TerminalContainer.js b/src/components/TerminalContainer.js
index 29b5cc6..5f25c63 100644
--- a/src/components/TerminalContainer.js
+++ b/src/components/TerminalContainer.js
@@ -3,22 +3,33 @@ import Terminal from './Terminal';
 import { Button, LoadingState, ErrorState } from './common';
 import { useTerminal } from '../hooks/useTerminal';
 
+const formatTabLabel = (id) => {
+    const [prefix, num] = id.split('-');
+    return `${prefix === 'cp' ? 'CP' : 'WK'} ${num}`;
+};
+
 const TerminalContainer = ({ sessionId }) => {
     const {
         terminals,
-        activeTerminal,
+        activeTarget,
+        activeTabId,
         sessionStatus,
         createTerminal,
-        switchTerminal,
+        addTerminal,
+        closeTerminal,
+        switchTarget,
+        switchTab,
         isSessionReady
     } = useTerminal(sessionId);
 
+    const activeTabs = terminals[activeTarget];
+
     return (
         <div className="h-full flex flex-col">
             <div className="bg-gray-800 px-4 py-2 text-white flex overflow-x-auto">
                 <Button
-                    variant={activeTerminal === 'control-plane' ? 'primary' : 'secondary'}
-                    onClick={() => switchTerminal('control-plane')}
+                    variant={activeTarget === 'control-plane' ? 'primary' : 'secondary'}
+                    onClick={() => switchTarget('control-plane')}
                     disabled={!isSessionReady}
                     className={`mr-2 flex items-center ${!isSessionReady ? 'opacity-50' : ''}`}
                 >
@@ -26,8 +37,8 @@ const TerminalContainer = ({ sessionId }) => {
                 </Button>
 
                 <Button
-                    variant={activeTerminal === 'worker-node' ? 'primary' : 'secondary'}
-                    onClick={() => switchTerminal('worker-node')}
+                    variant={activeTarget === 'worker-node' ? 'primary' : 'secondary'}
+                    onClick={() => switchTarget('worker-node')}
                     disabled={!isSessionReady}
                     className={`flex items-center ${!isSessionReady ? 'opacity-50' : ''}`}
                 >
@@ -35,6 +46,38 @@ const TerminalContainer = ({ sessionId }) => {
                 </Button>
             </div>
 
+            {isSessionReady && activeTabs.length > 0 && (
+                <div className="bg-gray-700 px-2 py-1 flex items-center overflow-x-auto gap-1">
+                    {activeTabs.map(tab => (
+                        <button
+                            key={tab.id}
+                            onClick={() => switchTab(tab.id)}
+                            className={`flex items-center px-3 py-1 text-xs rounded transition-colors ${
+                                tab.id === activeTabId
+                                    ? 'bg-gray-600 text-white'
+                                    : 'text-gray-300 hover:text-white hover:bg-gray-600'
+                            }`}
+                        >
+                            <span>{formatTabLabel(tab.id)}</span>
+                            {activeTabs.length > 1 && (
+                                <span
+                                    onClick={(e) => { e.stopPropagation(); closeTerminal(tab.id); }}
+                                    className="ml-2 hover:text-red-400 cursor-pointer"
+                                >
+                                    x
+                                </span>
+                            )}
+                        </button>
+                    ))}
+                    <button
+                        onClick={addTerminal}
+                        className="px-2 py-1 text-xs text-gray-300 hover:text-white hover:bg-gray-600 rounded transition-colors"
+                    >
+                        +
+                    </button>
+                </div>
+            )}
+
             <div className="flex-1 overflow-hidden relative">
                 {!isSessionReady && (
                     <div className="flex flex-col justify-center items-center h-full bg-gray-800 text-white p-4">
@@ -57,57 +100,45 @@ const TerminalContainer = ({ sessionId }) => {
 
                 {isSessionReady && (
                     <>
-                        <div className={`absolute inset-0 transition-opacity duration-300 ${activeTerminal === 'control-plane' ? 'opacity-100 z-10' : 'opacity-0 z-0'
-                            }`}>
-                            {terminals['control-plane'].url ? (
-                                <Terminal terminalUrl={terminals['control-plane'].url} />
-                            ) : (
-                                <div className="flex flex-col justify-center items-center h-full bg-gray-800 text-white p-4">
-                                    {terminals['control-plane'].isLoading ? (
-                                        <LoadingState message="Creating terminal session..." size="md" />
-                                    ) : terminals['control-plane'].error ? (
-                                        <ErrorState
-                                            message="Failed to create terminal"
-                                            details={terminals['control-plane'].error}
-                                            onRetry={() => createTerminal('control-plane')}
-                                        />
+                        {['control-plane', 'worker-node'].map(target =>
+                            terminals[target].map(tab => (
+                                <div
+                                    key={tab.id}
+                                    className={`absolute inset-0 transition-opacity duration-200 ${
+                                        tab.id === activeTabId
+                                            ? 'opacity-100 z-10'
+                                            : 'opacity-0 z-0 pointer-events-none'
+                                    }`}
+                                >
+                                    {tab.url ? (
+                                        <Terminal terminalUrl={tab.url} />
                                     ) : (
-                                        <Button
-                                            variant="primary"
-                                            onClick={() => createTerminal('control-plane')}
-                                        >
-                                            Connect to Control Plane
-                                        </Button>
+                                        <div className="flex flex-col justify-center items-center h-full bg-gray-800 text-white p-4">
+                                            {tab.isLoading ? (
+                                                <LoadingState message="Creating terminal session..." size="md" />
+                                            ) : tab.error ? (
+                                                <ErrorState
+                                                    message="Failed to create terminal"
+                                                    details={tab.error}
+                                                    onRetry={() => createTerminal(target)}
+                                                />
+                                            ) : null}
+                                        </div>
                                     )}
                                 </div>
-                            )}
-                        </div>
+                            ))
+                        )}
 
-                        <div className={`absolute inset-0 transition-opacity duration-300 ${activeTerminal === 'worker-node' ? 'opacity-100 z-10' : 'opacity-0 z-0'
-                            }`}>
-                            {terminals['worker-node'].url ? (
-                                <Terminal terminalUrl={terminals['worker-node'].url} />
-                            ) : (
-                                <div className="flex flex-col justify-center items-center h-full bg-gray-800 text-white p-4">
-                                    {terminals['worker-node'].isLoading ? (
-                                        <LoadingState message="Creating terminal session..." size="md" />
-                                    ) : terminals['worker-node'].error ? (
-                                        <ErrorState
-                                            message="Failed to create terminal"
-                                            details={terminals['worker-node'].error}
-                                            onRetry={() => createTerminal('worker-node')}
-                                        />
-                                    ) : (
-                                        <Button
-                                            variant="primary"
-                                            onClick={() => createTerminal('worker-node')}
-                                        >
-                                            Connect to Worker Node
-                                        </Button>
-                                    )}
-                                </div>
-                            )}
-                        </div>
+                        {activeTabs.length === 0 && (
+                            <div className="flex flex-col justify-center items-center h-full bg-gray-800 text-white p-4">
+                                <Button
+                                    variant="primary"
+                                    onClick={() => createTerminal(activeTarget)}
+                                >
+                                    Connect to {activeTarget === 'control-plane' ? 'Control Plane' : 'Worker Node'}
+                                </Button>
+                            </div>
+                        )}
                     </>
                 )}
             </div>
diff --git a/src/hooks/useTerminal.js b/src/hooks/useTerminal.js
index 64ef2cd..2dfcdf8 100644
--- a/src/hooks/useTerminal.js
+++ b/src/hooks/useTerminal.js
@@ -4,10 +4,11 @@ import { useToast } from '../contexts/ToastContext';
 
 export function useTerminal(sessionId) {
     const [terminals, setTerminals] = useState({
-        'control-plane': { url: null, isLoading: false, error: null },
-        'worker-node': { url: null, isLoading: false, error: null }
+        'control-plane': [],
+        'worker-node': []
     });
-    const [activeTerminal, setActiveTerminal] = useState('control-plane');
+    const [activeTarget, setActiveTarget] = useState('control-plane');
+    const [activeTabId, setActiveTabId] = useState(null);
     const [sessionStatus, setSessionStatus] = useState({
         isReady: false,
         isLoading: true,
@@ -17,6 +18,7 @@ export function useTerminal(sessionId) {
 
     const toast = useToast();
     const isMounted = useRef(true);
+    const nextIdRef = useRef({ 'control-plane': 1, 'worker-node': 1 });
 
     useEffect(() => {
         isMounted.current = true;
@@ -85,60 +87,98 @@ export function useTerminal(sessionId) {
             return null;
         }
 
-        if (terminals[target].isLoading) {
-            return null;
-        }
+        const prefix = target === 'control-plane' ? 'cp' : 'wk';
+        const num = nextIdRef.current[target]++;
+        const id = `${prefix}-${num}`;
 
-        try {
-            setTerminals(prev => ({
-                ...prev,
-                [target]: { ...prev[target], isLoading: true, error: null }
-            }));
+        setTerminals(prev => ({
+            ...prev,
+            [target]: [...prev[target], { id, url: null, isLoading: true, error: null }]
+        }));
+        setActiveTabId(id);
 
+        try {
             const result = await api.terminals.create(sessionId, target);
 
             if (isMounted.current) {
                 setTerminals(prev => ({
                     ...prev,
-                    [target]: {
-                        url: result.terminalUrl,
-                        isLoading: false,
-                        error: null
-                    }
+                    [target]: prev[target].map(t =>
+                        t.id === id ? { ...t, url: result.terminalUrl, isLoading: false } : t
+                    )
                 }));
-
-                return result.terminalUrl;
             }
+
+            return id;
         } catch (error) {
             if (isMounted.current) {
                 setTerminals(prev => ({
                     ...prev,
-                    [target]: {
-                        ...prev[target],
-                        isLoading: false,
-                        error: error.message || `Failed to create terminal for ${target}`
-                    }
+                    [target]: prev[target].map(t =>
+                        t.id === id ? { ...t, isLoading: false, error: error.message || `Failed to create terminal` } : t
+                    )
                 }));
                 toast.error(`Failed to create ${target} terminal`);
             }
             return null;
         }
-    }, [sessionId, sessionStatus.isReady, terminals, toast]);
+    }, [sessionId, sessionStatus.isReady, toast]);
+
+    const switchTarget = useCallback((target) => {
+        setActiveTarget(target);
+
+        setTerminals(prev => {
+            const tabs = prev[target];
+            if (tabs.length > 0) {
+                setActiveTabId(tabs[0].id);
+            } else if (sessionStatus.isReady) {
+                setTimeout(() => createTerminal(target), 0);
+            }
+            return prev;
+        });
+    }, [sessionStatus.isReady, createTerminal]);
 
-    const switchTerminal = useCallback((target) => {
-        setActiveTerminal(target);
+    const switchTab = useCallback((tabId) => {
+        setActiveTabId(tabId);
+    }, []);
+
+    const addTerminal = useCallback(() => {
+        createTerminal(activeTarget);
+    }, [activeTarget, createTerminal]);
+
+    const closeTerminal = useCallback((tabId) => {
+        for (const target of ['control-plane', 'worker-node']) {
+            setTerminals(prev => {
+                const tabs = prev[target];
+                const idx = tabs.findIndex(t => t.id === tabId);
+                if (idx === -1) return prev;
+
+                const newTabs = tabs.filter(t => t.id !== tabId);
+
+                if (tabId === activeTabId) {
+                    if (newTabs.length > 0) {
+                        const newIdx = Math.min(idx, newTabs.length - 1);
+                        setActiveTabId(newTabs[newIdx].id);
+                    } else {
+                        setActiveTabId(null);
+                    }
+                }
 
-        if (sessionStatus.isReady && !terminals[target].url && !terminals[target].isLoading) {
-            createTerminal(target);
+                return { ...prev, [target]: newTabs };
+            });
         }
-    }, [sessionStatus.isReady, terminals, createTerminal]);
+    }, [activeTabId]);
 
     return {
         terminals,
-        activeTerminal,
+        activeTarget,
+        activeTabId,
         sessionStatus,
         createTerminal,
-        switchTerminal,
+        addTerminal,
+        closeTerminal,
+        switchTarget,
+        switchTab,
         isSessionReady: sessionStatus.isReady
     };
 }