Merge pull request 'feature/terminaling' (#13) from feature/terminaling into main

Reviewed-on: #13

public/scripts/components/ClusterMembersComponent.js

@@ -23,6 +23,9 @@ class ClusterMembersComponent extends Component {
 		// Drawer state for desktop
 		this.drawer = new DrawerComponent();
 		
+		// Terminal panel container (shared with drawer)
+		this.terminalPanelContainer = null;
+		
 		// Selection state for highlighting
 		this.selectedMemberIp = null;
 	}
@@ -403,7 +406,6 @@ class ClusterMembersComponent extends Component {
 		
 		const membersHTML = members.map(member => {
 		const statusClass = (member.status && member.status.toUpperCase() === 'ACTIVE') ? 'status-online' : 'status-offline';
-		const statusText = (member.status && member.status.toUpperCase() === 'ACTIVE') ? 'Online' : 'Offline';
 		const statusIcon = (member.status && member.status.toUpperCase() === 'ACTIVE') ? '🟢' : '🔴';
 			
 			logger.debug('ClusterMembersComponent: Rendering member:', member);
@@ -433,10 +435,18 @@ class ClusterMembersComponent extends Component {
 							</div>
 							` : ''}
 						</div>
-						<div class="expand-icon">
+						<div class="member-actions">
-							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<button class="member-terminal-btn" title="Open Terminal" aria-label="Open Terminal">
-								<path d="M6 9l6 6 6-6"/>
+								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-							</svg>
+									<path d="M4 17l6-6-6-6"></path>
+									<path d="M12 19h8"></path>
+								</svg>
+							</button>
+							<div class="expand-icon">
+								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<path d="M6 9l6 6 6-6"/>
+								</svg>
+							</div>
 						</div>
 					</div>
 					<div class="member-details">
@@ -455,6 +465,7 @@ class ClusterMembersComponent extends Component {
 	setupMemberCards(members) {
 		setTimeout(() => {
 			this.findAllElements('.member-card').forEach((card, index) => {
+				const terminalBtn = card.querySelector('.member-terminal-btn');
 				const expandIcon = card.querySelector('.expand-icon');
 				const memberDetails = card.querySelector('.member-details');
 				const memberIp = card.dataset.memberIp;
@@ -505,6 +516,25 @@ class ClusterMembersComponent extends Component {
 						}
 					});
 				}
+
+				if (terminalBtn) {
+				this.addEventListener(terminalBtn, 'click', async (e) => {
+						e.stopPropagation();
+						e.preventDefault();
+						try {
+						if (!window.TerminalPanel) return;
+						this.ensureTerminalContainer();
+						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);
+						}
+					});
+				}
 			});
 		}, 100);
 	}
@@ -722,6 +752,20 @@ class ClusterMembersComponent extends Component {
 			this.selectedMemberIp = null;
 		}
 	}
+
+	ensureTerminalContainer() {
+		if (!this.terminalPanelContainer) {
+			try {
+				const drawer = this.drawer;
+				if (drawer && drawer.ensureDrawer) {
+					drawer.ensureDrawer();
+					this.terminalPanelContainer = drawer.terminalPanelContainer;
+				}
+			} catch (err) {
+				console.error('Failed to ensure terminal container:', err);
+			}
+		}
+	}
 }
 
 window.ClusterMembersComponent = ClusterMembersComponent; 

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,34 +10,56 @@
             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();
                 }
 
-                // Adjust position to be left of the details drawer
+                this.lastNodeIp = nodeIp || this.lastNodeIp;
-                this._adjustRightOffset();
+
-                if (!this.resizeHandler) {
+                // Reset any leftover inline positioning so CSS centering applies
-                    this.resizeHandler = () => this._adjustRightOffset();
+                if (this.container) {
-                    window.addEventListener('resize', this.resizeHandler);
+                    this.container.style.right = '';
+                    this.container.style.left = '';
+                    this.container.style.top = '';
+                    this.container.style.bottom = '';
+                    this.container.style.width = '';
                 }
 
-                // Show panel with animation
+                if (!this.isMinimized) {
-                requestAnimationFrame(() => {
+                    if (this.panelEl) {
-                    this.panelEl.classList.add('visible');
+                        this.panelEl.classList.remove('minimized');
-                    this.isOpen = true;
+                        this.panelEl.classList.remove('visible');
-                    this.inputEl && this.inputEl.focus();
+                        requestAnimationFrame(() => {
-                });
+                            this.panelEl.classList.add('visible');
+                            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);
@@ -49,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;
@@ -68,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>
@@ -77,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>
             `;
@@ -87,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) || '';
@@ -104,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) {
@@ -158,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) {
@@ -193,17 +289,6 @@
                 return text;
             }
         }
-
-        _adjustRightOffset() {
-            try {
-                const drawer = document.querySelector('.details-drawer');
-                const isOpen = drawer && drawer.classList.contains('open');
-                const width = isOpen ? drawer.getBoundingClientRect().width : 0;
-                if (this.container) {
-                    this.container.style.right = `${width}px`;
-                }
-            } catch (_) { /* no-op */ }
-        }
     }
 
     // Expose singleton API

public/styles/main.css

@@ -333,12 +333,46 @@ p {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
+    gap: 0.75rem;
 }
 
 .member-info {
     flex: 1;
 }
 
+.member-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.member-terminal-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    border-radius: 6px;
+    border: 1px solid var(--border-primary);
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-tertiary);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.member-terminal-btn:hover,
+.member-terminal-btn:focus-visible {
+    background: rgba(255, 255, 255, 0.12);
+    color: var(--text-secondary);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.member-terminal-btn svg {
+    width: 18px;
+    height: 18px;
+    stroke: currentColor;
+    stroke-width: 2;
+}
+
 .expand-icon {
     color: var(--text-tertiary);
     cursor: pointer;
@@ -3308,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);
@@ -3340,40 +3380,44 @@ select.param-input:focus {
     .details-drawer-backdrop { display: none; }
 }
 
-/* Terminal Panel - bottom up, left of drawer, 1/3 viewport height */
+/* Terminal Panel - bottom-centered modal style */
 .terminal-panel-container {
     position: fixed;
-    inset: auto 0 0 auto; /* bottom-right anchored; right adjusted dynamically */
+    inset: 0;
-    right: 0; /* updated at runtime to drawer width */
+    display: flex;
-    width: clamp(33.333vw, 600px, 90vw); /* match drawer width by default */
+    align-items: flex-end;
-    z-index: 1001; /* above drawer (1000) and backdrop (999) */
+    justify-content: center;
-    pointer-events: none; /* allow clicks only on panel */
+    z-index: 1001;
+    pointer-events: none;
 }
 
 .terminal-panel {
-    position: absolute;
+    position: relative;
-    left: 0;
+    width: min(720px, 90vw);
-    right: 0;
+    height: min(45vh, 520px);
-    bottom: 0;
+    max-height: 65vh;
-    height: 33vh; /* 1/3 of viewport height */
-    max-height: 40vh;
     background: var(--bg-primary);
     color: var(--text-primary);
-    border-top: 1px solid var(--border-primary);
+    border: 1px solid var(--border-primary);
-    border-left: 1px solid var(--border-primary);
+    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
-    box-shadow: 0 -8px 20px rgba(0,0,0,0.25);
+    transform: translateY(32px);
-    transform: translateY(100%);
     opacity: 0;
     transition: transform 0.25s ease, opacity 0.25s ease;
-    border-top-left-radius: 10px;
+    border-radius: 12px;
     pointer-events: auto;
     display: flex;
     flex-direction: column;
 }
+
+.terminal-panel.minimized {
+    display: none;
+}
+
 .terminal-panel.visible {
     transform: translateY(0);
     opacity: 1;
 }
+
 .terminal-header {
     display: flex;
     align-items: center;
@@ -3402,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;
@@ -3430,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;
@@ -3442,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;