feat: minimize terminal

public/scripts/components/ClusterMembersComponent.js

@@ -518,13 +518,17 @@ class ClusterMembersComponent extends Component {
 				}
 
 				if (terminalBtn) {
-					this.addEventListener(terminalBtn, 'click', (e) => {
+				this.addEventListener(terminalBtn, 'click', async (e) => {
 						e.stopPropagation();
 						e.preventDefault();
 						try {
-							if (window.TerminalPanel) {
+						if (!window.TerminalPanel) return;
 						this.ensureTerminalContainer();
-								window.TerminalPanel.open(this.terminalPanelContainer, memberIp);
+						const panel = window.TerminalPanel;
+						const wasMinimized = panel.isMinimized;
+						panel.open(this.terminalPanelContainer, memberIp);
+						if (wasMinimized && panel.restore) {
+							panel.restore();
 						}
 						} catch (err) {
 							console.error('Failed to open member terminal:', err);

public/scripts/components/DrawerComponent.js

@@ -35,7 +35,12 @@ class DrawerComponent {
         header.innerHTML = `
             <div class="drawer-title">Node Details</div>
             <div class="drawer-actions">
-                <button class="drawer-terminal-btn" title="Open Terminal" aria-label="Open Terminal">Terminal</button>
+                <button class="drawer-terminal-btn" title="Open Terminal" aria-label="Open Terminal">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M4 17l6-6-6-6"></path>
+                        <path d="M12 19h8"></path>
+                    </svg>
+                </button>
                 <button class="drawer-close" aria-label="Close">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <path d="M18 6L6 18M6 6l12 12"/>
@@ -66,7 +71,13 @@ class DrawerComponent {
                 e.stopPropagation();
                 try {
                     const nodeIp = this.activeDrawerComponent && this.activeDrawerComponent.viewModel && this.activeDrawerComponent.viewModel.get('nodeIp');
-                    window.TerminalPanel && window.TerminalPanel.open(this.terminalPanelContainer, nodeIp);
+                    if (!window.TerminalPanel) return;
+                    const panel = window.TerminalPanel;
+                    const wasMinimized = panel.isMinimized;
+                    panel.open(this.terminalPanelContainer, nodeIp);
+                    if (wasMinimized && panel.restore) {
+                        panel.restore();
+                    }
                 } catch (err) {
                     console.error('Failed to open terminal:', err);
                 }
@@ -124,9 +135,6 @@ class DrawerComponent {
         if (this.detailsDrawer) this.detailsDrawer.classList.remove('open');
         if (this.detailsDrawerBackdrop) this.detailsDrawerBackdrop.classList.remove('visible');
         
-        // Also close terminal panel if open
-        try { if (window.TerminalPanel) window.TerminalPanel.close(); } catch (_) {}
-
         // Call close callback if provided
         if (this.onCloseCallback) {
             this.onCloseCallback();

public/scripts/components/TerminalPanelComponent.js

@@ -10,17 +10,22 @@
             this.connectedIp = null;
             this.isOpen = false;
             this.resizeHandler = null;
+            this.isMinimized = false;
+            this.dockEl = null;
+            this.dockBtnEl = null;
+            this.lastNodeIp = null;
         }
 
         open(container, nodeIp) {
             try {
                 this.container = container;
                 if (!this.container) return;
-
                 if (!this.panelEl) {
                     this._buildPanel();
                 }
 
+                this.lastNodeIp = nodeIp || this.lastNodeIp;
+
                 // Reset any leftover inline positioning so CSS centering applies
                 if (this.container) {
                     this.container.style.right = '';
@@ -30,16 +35,31 @@
                     this.container.style.width = '';
                 }
 
-                // Show panel with animation
+                if (!this.isMinimized) {
+                    if (this.panelEl) {
+                        this.panelEl.classList.remove('minimized');
+                        this.panelEl.classList.remove('visible');
                         requestAnimationFrame(() => {
                             this.panelEl.classList.add('visible');
-                    this.isOpen = true;
                             this.inputEl && this.inputEl.focus();
                         });
+                    }
+                    this._hideDock();
+                } else {
+                    if (this.panelEl) {
+                        this.panelEl.classList.remove('visible');
+                        this.panelEl.classList.add('minimized');
+                    }
+                    this._showDock();
+                }
+
+                this.isOpen = true;
 
                 // Connect websocket
                 if (nodeIp) {
                     this._connect(nodeIp);
+                } else if (this.lastNodeIp && !this.socket) {
+                    this._connect(this.lastNodeIp);
                 }
             } catch (err) {
                 console.error('TerminalPanel.open error:', err);
@@ -51,6 +71,9 @@
                 if (!this.isOpen) return;
                 this.panelEl && this.panelEl.classList.remove('visible');
                 this.isOpen = false;
+                this.isMinimized = false;
+                if (this.panelEl) this.panelEl.classList.remove('minimized');
+                this._hideDock();
                 if (this.socket) {
                     try { this.socket.close(); } catch (_) {}
                     this.socket = null;
@@ -70,7 +93,7 @@
                 <div class="terminal-header">
                     <div class="terminal-title">Terminal</div>
                     <div class="terminal-actions">
-                        <button class="terminal-clear-btn" title="Clear">Clear</button>
+                        <button class="terminal-minimize-btn" title="Minimize">_</button>
                         <button class="terminal-close-btn" title="Close">✕</button>
                     </div>
                 </div>
@@ -79,6 +102,7 @@
                 </div>
                 <div class="terminal-input-row">
                     <input type="text" class="terminal-input" placeholder="Type and press Enter to send" />
+                    <button class="terminal-clear-btn" title="Clear">Clear</button>
                     <button class="terminal-send-btn">Send</button>
                 </div>
             `;
@@ -89,6 +113,7 @@
             const sendBtn = this.panelEl.querySelector('.terminal-send-btn');
             const closeBtn = this.panelEl.querySelector('.terminal-close-btn');
             const clearBtn = this.panelEl.querySelector('.terminal-clear-btn');
+            const minimizeBtn = this.panelEl.querySelector('.terminal-minimize-btn');
 
             const sendHandler = () => {
                 const value = (this.inputEl && this.inputEl.value) || '';
@@ -106,6 +131,7 @@
             });
             if (closeBtn) closeBtn.addEventListener('click', (e) => { e.stopPropagation(); this.close(); });
             if (clearBtn) clearBtn.addEventListener('click', (e) => { e.stopPropagation(); this._clear(); });
+            if (minimizeBtn) minimizeBtn.addEventListener('click', (e) => { e.stopPropagation(); this.minimize(); });
         }
 
         _connect(nodeIp) {
@@ -160,6 +186,74 @@
             }
         }
 
+        minimize() {
+            try {
+                if (!this.panelEl || this.isMinimized) return;
+                this.panelEl.classList.remove('visible');
+                this.panelEl.classList.add('minimized');
+                this.isMinimized = true;
+                this.isOpen = true;
+                this._showDock();
+            } catch (err) {
+                console.error('TerminalPanel.minimize error:', err);
+            }
+        }
+
+        restore() {
+            try {
+                if (!this.panelEl || !this.isMinimized) return;
+                this.panelEl.classList.remove('minimized');
+                requestAnimationFrame(() => {
+                    this.panelEl.classList.add('visible');
+                    this.inputEl && this.inputEl.focus();
+                });
+                this.isMinimized = false;
+                this.isOpen = true;
+                this._hideDock();
+            } catch (err) {
+                console.error('TerminalPanel.restore error:', err);
+            }
+        }
+
+        _ensureDock() {
+            if (this.dockEl) return this.dockEl;
+            const dock = document.createElement('div');
+            dock.className = 'terminal-dock';
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'terminal-dock-btn';
+            button.title = 'Show Terminal';
+            button.setAttribute('aria-label', 'Show Terminal');
+            button.innerHTML = `
+                <span class="terminal-dock-icon" aria-hidden="true">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M4 17l6-6-6-6"></path>
+                        <path d="M12 19h8"></path>
+                    </svg>
+                </span>
+                <span class="terminal-dock-label">Terminal</span>
+            `;
+            button.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.restore();
+            });
+            dock.appendChild(button);
+            document.body.appendChild(dock);
+            this.dockEl = dock;
+            this.dockBtnEl = button;
+            return dock;
+        }
+
+        _showDock() {
+            const dock = this._ensureDock();
+            if (dock) dock.classList.add('visible');
+        }
+
+        _hideDock() {
+            if (this.dockEl) this.dockEl.classList.remove('visible');
+        }
+
         _send(text) {
             try {
                 if (!this.socket || this.socket.readyState !== 1) {

public/styles/main.css

@@ -3342,13 +3342,19 @@ select.param-input:focus {
     border: 1px solid var(--border-secondary);
     color: var(--text-secondary);
     border-radius: 8px;
-    padding: 0.35rem 0.6rem;
+    padding: 0.35rem;
     cursor: pointer;
 }
 .drawer-terminal-btn:hover {
     background: var(--bg-hover);
     color: var(--text-primary);
 }
+.drawer-terminal-btn svg {
+    width: 18px;
+    height: 18px;
+    stroke: currentColor;
+    stroke-width: 2;
+}
 .drawer-close {
     background: transparent;
     border: 1px solid var(--border-secondary);
@@ -3381,7 +3387,6 @@ select.param-input:focus {
     display: flex;
     align-items: flex-end;
     justify-content: center;
-    padding: 1.5rem;
     z-index: 1001;
     pointer-events: none;
 }
@@ -3404,6 +3409,10 @@ select.param-input:focus {
     flex-direction: column;
 }
 
+.terminal-panel.minimized {
+    display: none;
+}
+
 .terminal-panel.visible {
     transform: translateY(0);
     opacity: 1;
@@ -3437,6 +3446,14 @@ select.param-input:focus {
     background: var(--bg-hover);
     color: var(--text-primary);
 }
+
+.terminal-actions .terminal-minimize-btn {
+    width: 2rem;
+    padding: 0.25rem 0;
+    font-size: 1rem;
+    line-height: 1;
+}
+
 .terminal-body {
     flex: 1;
     overflow: auto;
@@ -3465,6 +3482,18 @@ select.param-input:focus {
     border-radius: 6px;
     padding: 0.4rem 0.6rem;
 }
+.terminal-input-row .terminal-clear-btn {
+    background: transparent;
+    border: 1px solid var(--border-secondary);
+    color: var(--text-secondary);
+    border-radius: 6px;
+    padding: 0.4rem 0.6rem;
+    cursor: pointer;
+}
+.terminal-input-row .terminal-clear-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
 .terminal-send-btn {
     background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
     color: white;
@@ -3477,6 +3506,62 @@ select.param-input:focus {
     filter: brightness(1.05);
 }
 
+.terminal-dock {
+    position: fixed;
+    bottom: 1.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1001;
+    display: none;
+    pointer-events: none;
+}
+
+.terminal-dock.visible {
+    display: flex;
+}
+
+.terminal-dock-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.5rem 1rem;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(21, 31, 46, 0.85);
+    backdrop-filter: blur(14px);
+    color: var(--text-primary);
+    cursor: pointer;
+    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
+    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+    pointer-events: auto;
+}
+
+.terminal-dock-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 22px 44px rgba(0,0,0,0.35);
+    background: rgba(35, 49, 68, 0.95);
+}
+
+.terminal-dock-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+}
+
+.terminal-dock-icon svg {
+    width: 18px;
+    height: 18px;
+    stroke: currentColor;
+    stroke-width: 2;
+}
+
+.terminal-dock-label {
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
 /* Topology hover tooltip for labels */
 .topology-tooltip {
     position: fixed;