Full return back to old code with minor fixes

.idea/workspace.xml

@@ -5,7 +5,9 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="8497df64-d86b-4c98-ac58-c157d9d3fb1e" name="Changes" comment="Nano zoom fix #16 (ssh-2-promise)">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/backend/server.js" beforeDir="false" afterPath="$PROJECT_DIR$/backend/server.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/App.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/App.jsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -40,32 +42,32 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
+  <component name="PropertiesComponent">{
-  "keyToString": {
+  &quot;keyToString&quot;: {
-    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
+    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
-    "RunOnceActivity.ShowReadmeOnStart": "true",
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    "RunOnceActivity.git.unshallow": "true",
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    "Shell Script.Node Server.js Start.executor": "Run",
+    &quot;Shell Script.Node Server.js Start.executor&quot;: &quot;Run&quot;,
-    "Shell Script.Run backend and frontend.executor": "Run",
+    &quot;Shell Script.Run backend and frontend.executor&quot;: &quot;Run&quot;,
-    "Shell Script.run_backend_frontend.executor": "Run",
+    &quot;Shell Script.run_backend_frontend.executor&quot;: &quot;Run&quot;,
-    "git-widget-placeholder": "alpha-1.0",
+    &quot;git-widget-placeholder&quot;: &quot;alpha-1.0&quot;,
-    "ignore.virus.scanning.warn.message": "true",
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
-    "last_opened_file_path": "D:/Programming Projects/SSH-Project-JB",
+    &quot;last_opened_file_path&quot;: &quot;D:/Programming Projects/SSH-Project-JB&quot;,
-    "node.js.detected.package.eslint": "true",
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    "node.js.detected.package.tslint": "true",
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    "node.js.selected.package.eslint": "(autodetect)",
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    "node.js.selected.package.tslint": "(autodetect)",
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    "nodejs_package_manager_path": "npm",
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    "npm.run_start.executor": "Run",
+    &quot;npm.run_start.executor&quot;: &quot;Run&quot;,
-    "npm.run_start_frontend.executor": "Run",
+    &quot;npm.run_start_frontend.executor&quot;: &quot;Run&quot;,
-    "npm.run_start_node_backend.executor": "Run",
+    &quot;npm.run_start_node_backend.executor&quot;: &quot;Run&quot;,
-    "npm.run_start_vite.executor": "Run",
+    &quot;npm.run_start_vite.executor&quot;: &quot;Run&quot;,
-    "npm.start.executor": "Run",
+    &quot;npm.start.executor&quot;: &quot;Run&quot;,
-    "settings.editor.selected.configurable": "ml.llm.LLMConfigurable",
+    &quot;settings.editor.selected.configurable&quot;: &quot;ml.llm.LLMConfigurable&quot;,
-    "ts.external.directory.path": "D:\\Program Files (x86)\\Applications\\Jetbrains Webstorm\\WebStorm 2024.3.1\\plugins\\javascript-plugin\\jsLanguageServicesImpl\\external",
+    &quot;ts.external.directory.path&quot;: &quot;D:\\Program Files (x86)\\Applications\\Jetbrains Webstorm\\WebStorm 2024.3.1\\plugins\\javascript-plugin\\jsLanguageServicesImpl\\external&quot;,
-    "vue.rearranger.settings.migration": "true"
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RunManager" selected="Shell Script.run_backend_frontend">
     <configuration name="run_backend_frontend" type="ShConfigurationType">
       <option name="SCRIPT_TEXT" value="Start-Process &quot;powershell&quot; -ArgumentList &quot;-NoProfile&quot;, &quot;-Command npm run start-vite&quot;; Start-Process &quot;powershell&quot; -ArgumentList &quot;-NoProfile&quot;, &quot;-Command npm run start-server&quot; " />

backend/server.js

@@ -1,91 +1,100 @@
 const WebSocket = require('ws');
-const SSH = require('ssh2-promise');
+const ssh2 = require('ssh2');
 const http = require('http');
 
+// Create an HTTP server to serve WebSocket connections
 const server = http.createServer((req, res) => {
-  res.writeHead(200, { 'Content-Type': 'text/plain' });
+    res.writeHead(200, { 'Content-Type': 'text/plain' });
-  res.end('WebSocket server is running\n');
+    res.end('WebSocket server is running\n');
 });
 
+// Create a WebSocket server attached to the HTTP server
 const wss = new WebSocket.Server({ server });
 
+// WebSocket connection handling
 wss.on('connection', (ws) => {
-  console.log('WebSocket connection established');
+    console.log('WebSocket connection established');
 
-  let ssh = null;
+    let conn = null; // Declare SSH client outside to manage lifecycle
-  let termDimensions = { rows: 0, cols: 0, height: 0, weight: 0 };
-
-  ws.on('message', async (message) => {
-    try {
-      const data = JSON.parse(message);
-      if (data.type === 'resize') {
-        termDimensions = data;
-      } else if (data.username && data.password) {
-        ssh = new SSH({
-          host: data.host,
-          username: data.username,
-          password: data.password
-        });
 
+    ws.on('message', (message) => {
         try {
-          await ssh.connect();
+            const data = JSON.parse(message); // Try parsing the incoming message as JSON
-          const stream = await ssh.shell();
 
-          stream.on('data', (data) => {
+            // Check if message contains SSH connection details
-            const dataString = data.toString();
+            if (data.host && data.username && data.password) {
-            ws.send(dataString);
+                if (conn) {
-          });
+                    conn.end(); // Close any previous connection before starting a new one
+                }
 
-          stream.stderr.on('data', (data) => {
+                conn = new ssh2.Client(); // Create a new SSH connection instance
-            const errorString = data.toString();
-            console.error('SSH error:', errorString);
-          });
 
-          ws.on('message', (message) => {
+                // When the SSH connection is ready
-            try {
+                conn.on('ready', () => {
-              const data = JSON.parse(message);
+                    console.log('SSH Connection established');
-              if (data.type === 'resize') {
+
-                termDimensions = data;
+                    // Start an interactive shell session
-              }
+                    conn.shell((err, stream) => {
-            } catch (err) {
+                        if (err) {
-              stream.write(message);
+                            console.log(`SSH Error: ${err}`);
+                            ws.send(`Error: ${err}`);
+                            return;
+                        }
+
+                        // Handle data from SSH session
+                        stream.on('data', (data) => {
+                            console.log(`SSH Output: ${data}`);
+                            ws.send(data.toString()); // Send the SSH output back to WebSocket client
+                        });
+
+                        // Handle stream close event
+                        stream.on('close', () => {
+                            console.log('SSH stream closed');
+                            conn.end();
+                        });
+
+                        // When the WebSocket client sends a message (from terminal input), forward it to the SSH stream
+                        ws.on('message', (message) => {
+                            console.log(`Received message from WebSocket: ${message}`);
+                            stream.write(message); // Write the message (input) to the SSH shell
+                        });
+                    });
+                }).on('error', (err) => {
+                    console.log('SSH Connection Error: ', err);
+                    ws.send(`SSH Error: ${err}`);
+                }).connect({
+                    host: data.host,       // Host provided from the client
+                    port: 22,              // Default SSH port
+                    username: data.username,  // Username provided from the client
+                    password: data.password,  // Password provided from the client
+                    keepaliveInterval: 10000,  // Send a heartbeat every 10 seconds
+                    keepaliveCountMax: 5,      // Allow three missed heartbeats before considering the connection dead
+                });
+            }
+        } catch (error) {
+            // If message is not valid JSON (i.e., terminal input), treat it as raw text and send it to SSH
+            console.log('Received non-JSON message, sending to SSH session:', message);
+            if (conn) {
+                const stream = conn._stream; // Access the SSH stream directly
+                if (stream && stream.writable) {
+                    stream.write(message); // Write raw input message to SSH stream
+                }
+            } else {
+                console.error('SSH connection is not established yet.');
             }
-          });
-
-          stream.on('close', () => {
-            console.log('Stream closed');
-            ssh.close();
-          });
-        } catch (err) {
-          console.error('SSH connection error:', err);
         }
-      }
+    });
-    } catch (err) {
-      console.error('Message processing error:', err);
-    }
-  });
 
-  ws.on('close', () => {
+    // Handle WebSocket close event
-    console.log('WebSocket closed');
+    ws.on('close', () => {
-    if (ssh) {
+        console.log('WebSocket closed');
-      ssh.close();
+        if (conn) {
-    }
+            conn.end(); // Close SSH connection when WebSocket client disconnects
-  });
+        }
-
+    });
-  ws.on('error', (err) => {
-    console.error('WebSocket error:', err);
-  });
-
-  // Ping-pong is used to keep the connection alive.
-  const interval = setInterval(() => {
-    if (ws.readyState === WebSocket.OPEN) {
-      ws.ping();
-    } else {
-      clearInterval(interval);
-    }
-  }, 5000);
 });
 
+// Start the WebSocket server on port 8081
 server.listen(8081, () => {
-  console.log('Server listening on port 8081');
+    console.log('WebSocket server is listening on ws://localhost:8081');
 });

frontend/src/App.jsx

@@ -16,109 +16,90 @@ const App = () => {
   const [isSideBarHidden, setIsSideBarHidden] = useState(false);
 
   useEffect(() => {
-    console.log('Initializing terminal...');
+    // Initialize the terminal and the fit addon
     terminal.current = new Terminal({
       cursorBlink: true,
-      theme: { background: '#1e1e1e', foreground: '#ffffff' },
+      theme: {
+        background: '#1e1e1e',
+        foreground: '#ffffff',
+      },
       macOptionIsMeta: true,
       allowProposedApi: true,
-      fontSize: 14,
+      scrollback: 5000,
     });
 
+    // Initialize and attach the fit addon to the terminal
     fitAddon.current = new FitAddon();
     terminal.current.loadAddon(fitAddon.current);
 
-    let resizeObserver = new ResizeObserver(() => {
+    terminal.current.open(terminalRef.current);
+
+    // Resize terminal to fit the container initially
+    fitAddon.current.fit();
+
+    // Adjust terminal size on window resize
+    const resizeListener = () => {
       fitAddon.current.fit();
-      notifyServerOfResize();
+    };
-    });
+    window.addEventListener('resize', resizeListener);
-
-    if (terminalRef.current) {
-      terminal.current.open(terminalRef.current);
-      console.log('Terminal opened successfully.');
-      resizeObserver.observe(terminalRef.current);
-    } else {
-      console.error('Terminal reference is not valid!');
-    }
 
+    // Monitor terminal data (activity)
     terminal.current.onData((data) => {
       if (socket.current && socket.current.readyState === WebSocket.OPEN) {
         socket.current.send(data);
       }
     });
 
-
+    // Add specific resize call for certain programs like nano or vim
-    const notifyServerOfResize = () => {
+    const resizeTerminalOnStart = () => {
-      if (socket.current && socket.current.readyState === WebSocket.OPEN) {
+      // Resize immediately after starting vim/nano or other programs
-        const { rows, cols } = terminal.current;
+      fitAddon.current.fit();
-        socket.current.send(
+      terminal.current.clear();
-            JSON.stringify({
-              type: 'resize',
-              rows,
-              cols,
-              height: terminalRef.current.offsetHeight,
-              width: terminalRef.current.offsetWidth,
-            })
-        );
-      }
     };
 
-    const resizeTerminal = () => {
+    terminal.current.onData((data) => {
-      if (terminalRef.current) {
+      if (data.includes('nano') || data.includes('vim')) {
-        fitAddon.current.fit();
+        // Trigger resize immediately when these programs start
-        notifyServerOfResize();
+        resizeTerminalOnStart();
       }
-    };
+    });
-
-    resizeTerminal();
-    window.addEventListener('resize', resizeTerminal);
 
+    // Cleanup on component unmount
     return () => {
       terminal.current.dispose();
       if (socket.current) {
         socket.current.close();
       }
-      window.removeEventListener('resize', resizeTerminal);
+      window.removeEventListener('resize', resizeListener);
-      resizeObserver.disconnect();
     };
   }, []);
 
   const handleConnect = () => {
-    console.log('Connecting...');
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${protocol}//${window.location.host}/ws/`;
+    const wsUrl = `${protocol}//${window.location.host}/ws/`; // Use current host and "/ws/" endpoint
-    console.log(`WebSocket URL: ${wsUrl}`);
+
+    if (!host || !username || !password) {
+      terminal.current.writeln('Please fill in all fields.');
+      return;
+    }
 
     socket.current = new WebSocket(wsUrl);
 
     socket.current.onopen = () => {
-      console.log('WebSocket connection opened');
       terminal.current.writeln(`Connected to WebSocket server at ${wsUrl}`);
       socket.current.send(JSON.stringify({ host, username, password }));
       setIsConnected(true);
     };
 
     socket.current.onmessage = (event) => {
-      console.log('Received message:', event.data);
+      terminal.current.write(event.data);
-      try {
-        const parsedData = JSON.parse(event.data);
-        if (parsedData.type === 'process_closed') {
-          notifyServerOfResize();
-        } else {
-          terminal.current.write(event.data);
-        }
-      } catch (error) {
-        terminal.current.write(event.data)
-      }
     };
 
     socket.current.onerror = (error) => {
-      console.error('WebSocket error:', error);
       terminal.current.writeln(`WebSocket error: ${error.message}`);
     };
 
     socket.current.onclose = () => {
-      console.log('WebSocket connection closed');
       terminal.current.writeln('Disconnected from WebSocket server.');
       setIsConnected(false);
     };
@@ -130,11 +111,6 @@ const App = () => {
 
   const handleSideBarHiding = () => {
     setIsSideBarHidden((prevState) => !prevState);
-    if (!isSideBarHidden) {
-      setTimeout(() => {
-        fitAddon.current.fit();
-      }, 100);
-    }
   };
 
   return (
@@ -168,7 +144,11 @@ const App = () => {
           <div ref={terminalRef} className="terminal-container"></div>
         </div>
 
-        <button className="hide-sidebar-button" onClick={handleSideBarHiding}>
+        {/* Hide button always positioned in the bottom-right corner */}
+        <button
+            className="hide-sidebar-button"
+            onClick={handleSideBarHiding}
+        >
           {isSideBarHidden ? '+' : '-'}
         </button>
       </div>