Release 1.0!!!!

.idea/workspace.xml

@@ -4,9 +4,11 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="8497df64-d86b-4c98-ac58-c157d9d3fb1e" name="Changes" comment="Docker build update #10">
+    <list default="true" id="8497df64-d86b-4c98-ac58-c157d9d3fb1e" name="Changes" comment="Docker build update #10 (actual final)">
-      <change beforePath="$PROJECT_DIR$/.github/workflows/docker-image.yml" beforeDir="false" afterPath="$PROJECT_DIR$/.github/workflows/docker-image.yml" afterDir="false" />
       <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" />
+      <change beforePath="$PROJECT_DIR$/info.txt" beforeDir="false" afterPath="$PROJECT_DIR$/info.txt" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -115,7 +117,9 @@
       <updated>1733439468142</updated>
       <workItem from="1733439479708" duration="5489000" />
       <workItem from="1733448523969" duration="3535000" />
-      <workItem from="1733549186397" duration="8448000" />
+      <workItem from="1733549186397" duration="8748000" />
+      <workItem from="1733599078854" duration="1895000" />
+      <workItem from="1733601633451" duration="2033000" />
     </task>
     <task id="LOCAL-00001" summary="Nano zoom fix #11">
       <option name="closed" value="true" />
@@ -309,7 +313,23 @@
       <option name="project" value="LOCAL" />
       <updated>1733558347319</updated>
     </task>
-    <option name="localTasksCounter" value="25" />
+    <task id="LOCAL-00025" summary="Docker build update #10 (I hope final)">
+      <option name="closed" value="true" />
+      <created>1733558781194</created>
+      <option name="number" value="00025" />
+      <option name="presentableId" value="LOCAL-00025" />
+      <option name="project" value="LOCAL" />
+      <updated>1733558781194</updated>
+    </task>
+    <task id="LOCAL-00026" summary="Docker build update #10 (actual final)">
+      <option name="closed" value="true" />
+      <created>1733558952696</created>
+      <option name="number" value="00026" />
+      <option name="presentableId" value="LOCAL-00026" />
+      <option name="project" value="LOCAL" />
+      <updated>1733558952696</updated>
+    </task>
+    <option name="localTasksCounter" value="27" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -358,6 +378,8 @@
     <MESSAGE value="Docker build update #8 (nevermind not finanl)" />
     <MESSAGE value="Docker build update #9 (nevermind not finanl)" />
     <MESSAGE value="Docker build update #10" />
-    <option name="LAST_COMMIT_MESSAGE" value="Docker build update #10" />
+    <MESSAGE value="Docker build update #10 (I hope final)" />
+    <MESSAGE value="Docker build update #10 (actual final)" />
+    <option name="LAST_COMMIT_MESSAGE" value="Docker build update #10 (actual final)" />
   </component>
 </project>

backend/server.js

@@ -2,117 +2,91 @@ const WebSocket = require('ws');
 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.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');
 
-    let conn = null;
+    let conn = new ssh2.Client();
     let stream = null;
-    let interval = null;
+    let currentCols = 80;
+    let currentRows = 24;
+
+    const resizeTerminal = (cols, rows) => {
+        if (stream && stream.setWindow) {
+            stream.setWindow(rows, cols, rows * 100, cols * 100);  // Adjust terminal size
+            console.log(`Terminal resized successfully: cols=${cols}, rows=${rows}`);
+        }
+    };
 
     ws.on('message', (message) => {
+        const messageStr = message.toString();
+
+        let data;
         try {
-            const data = JSON.parse(message);
+            if (messageStr.trim().startsWith('{')) {
-
+                data = JSON.parse(messageStr);
-            if (data.host && data.port && data.username && data.password) {
+            } else if (stream && stream.writable) {
-                if (conn) {
+                stream.write(messageStr);
-                    conn.end();
+                return;
-                }
-
-                conn = new ssh2.Client();
-
-                interval = setInterval(() => {
-                    if (ws.readyState === WebSocket.OPEN) {
-                        ws.ping();
-                    } else {
-                        clearInterval(interval);
-                    }
-                }, 15000);
-
-                conn.on('ready', () => {
-                    console.log('SSH Connection established');
-                    conn.shell((err, sshStream) => {
-                        if (err) {
-                            console.log(`SSH Error: ${err}`);
-                            ws.send(`Error: ${err}`);
-                            return;
-                        }
-
-                        stream = sshStream;
-
-                        // Send stty commands for resizing rows and columns
-                        const resizeCommand = (rows, cols) => {
-                            return `stty rows ${rows} cols ${cols}\n`;
-                        };
-
-                        // Adjust terminal size once shell is ready
-                        ws.on('message', (msg) => {
-                            try {
-                                const input = JSON.parse(msg);
-                                if (input.type === 'resize') {
-                                    const resizeCmd = resizeCommand(input.rows, input.cols);
-                                    stream.write(resizeCmd);  // Resize the terminal in SSH
-                                } else {
-                                    stream.write(msg); // Regular input handling
-                                }
-                            } catch (e) {
-                                // If it's not JSON, it's a regular key press
-                                stream.write(msg);
-                            }
-                        });
-
-                        stream.on('data', (data) => {
-                            console.log(`SSH Output: ${data}`);
-                            ws.send(data.toString()); // Send the data back to the client once
-                        });
-
-                        stream.on('close', () => {
-                            console.log('SSH stream closed');
-                            conn.end();
-                        });
-
-                        // Send only the resize commands initially without `stty sane`
-                        const initialResizeCmd = resizeCommand(24, 80); // Example initial size
-                        stream.write(initialResizeCmd);  // Set terminal size
-                    });
-                }).on('error', (err) => {
-                    console.log('SSH Connection Error: ', err);
-                    ws.send(`SSH Error: ${err}`);
-                }).connect({
-                    host: data.host,
-                    port: data.port,
-                    username: data.username,
-                    password: data.password,
-                    keepaliveInterval: 10000,
-                    keepaliveCountMax: 5,
-                });
             }
         } catch (error) {
-            console.log('Received non-JSON message: ', message);
+            console.error('Failed to process message:', error);
+            return;
+        }
+
+        if (data?.host && data.port && data.username && data.password) {
+            conn.on('ready', () => {
+                console.log('SSH Connection established');
+                conn.shell({ term: 'xterm', cols: currentCols, rows: currentRows }, (error, newStream) => {
+                    if (error) {
+                        console.error(`SSH Shell Error: ${error}`);
+                        ws.send(`Error: Could not establish a shell: ${error.message}`);
+                        return;
+                    }
+
+                    stream = newStream;
+
+                    stream.on('data', (chunk) => {
+                        ws.send(chunk.toString());
+                    });
+
+                    stream.on('close', () => {
+                        console.log('SSH stream closed');
+                        conn.end();
+                    });
+                });
+            }).on('error', (err) => {
+                console.log('SSH Connection Error:', err);
+                ws.send(`SSH Connection Error: ${err.message}`);
+            }).connect({
+                host: data.host,
+                port: data.port,
+                username: data.username,
+                password: data.password,
+                keepaliveInterval: 10000,
+                keepaliveCountMax: 5,
+            });
+        } else if (data?.cols && data.rows) {
+            currentCols = data.cols;
+            currentRows = data.rows;
+            resizeTerminal(currentCols, currentRows);
         }
     });
 
     ws.on('close', () => {
+        console.log('WebSocket closed');
         if (conn) {
             conn.end();
         }
-        if (interval) {
-            clearInterval(interval);
-        }
-        console.log('WebSocket connection closed');
     });
 });
 
-// Start HTTP server
 server.listen(8081, () => {
-    console.log('WebSocket server listening on ws://localhost:8081');
+    console.log('WebSocket server is listening on ws://localhost:8081');
 });

frontend/src/App.jsx

@@ -10,14 +10,13 @@ const App = () => {
   const fitAddon = useRef(null);
   const socket = useRef(null);
   const [host, setHost] = useState('');
-  const [port, setPort] = useState(22);
+  const [port, setPort] = useState('22');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [isConnected, setIsConnected] = useState(false);
   const [isSideBarHidden, setIsSideBarHidden] = useState(false);
 
   useEffect(() => {
-    // Initialize the terminal and the fit addon
     terminal.current = new Terminal({
       cursorBlink: true,
       theme: {
@@ -27,36 +26,50 @@ const App = () => {
       macOptionIsMeta: true,
       allowProposedApi: true,
       scrollback: 5000,
-      // Do not enable local echo
-      disableStdin: false,
     });
 
-    // Initialize and attach the fit addon to the terminal
     fitAddon.current = new FitAddon();
     terminal.current.loadAddon(fitAddon.current);
 
     terminal.current.open(terminalRef.current);
-
-    // Resize terminal to fit the container initially
     fitAddon.current.fit();
 
-    // Adjust terminal size on window resize
+    // Fit the terminal and send the size when needed
-    const handleResize = () => {
+    const fitAndNotifyResize = () => {
       fitAddon.current.fit();
       if (socket.current && socket.current.readyState === WebSocket.OPEN) {
         socket.current.send(JSON.stringify({
-          type: 'resize',
-          rows: terminal.current.rows,
           cols: terminal.current.cols,
+          rows: terminal.current.rows,
         }));
       }
     };
-    window.addEventListener('resize', handleResize);
+    window.addEventListener('resize', fitAndNotifyResize);
+
+    terminal.current.onResize(({ cols, rows }) => {
+      console.log(`Terminal resized to cols:${cols}, rows:${rows}`);
+      fitAndNotifyResize();
+    });
+
+    const handleConnectionEstablished = () => {
+      fitAndNotifyResize();
+    };
+
+    window.addEventListener('connection-established', handleConnectionEstablished);
+
+    // Monitor terminal data (activity)
+    terminal.current.onData((data) => {
+      if (socket.current && socket.current.readyState === WebSocket.OPEN) {
+        socket.current.send(data);
+      }
+    });
 
     return () => {
       terminal.current.dispose();
-      if (socket.current) socket.current.close();
+      if (socket.current) {
-      window.removeEventListener('resize', handleResize);
+        socket.current.close();
+      }
+      window.removeEventListener('resize', fitAndNotifyResize);
     };
   }, []);
 
@@ -69,7 +82,7 @@ const App = () => {
       return;
     }
 
-    socket.current = new WebSocket("ws://localhost:8081");
+    socket.current = new WebSocket(wsUrl);
 
     socket.current.onopen = () => {
       terminal.current.writeln(`Connected to WebSocket server at ${wsUrl}`);
@@ -83,12 +96,15 @@ const App = () => {
             cols: terminal.current.cols
           })
       );
+
+      // Dispatch a custom event when connection is open
+      const event = new Event('connection-established');
+      window.dispatchEvent(event);
+
       setIsConnected(true);
     };
 
     socket.current.onmessage = (event) => {
-      // Write the incoming data from WebSocket to the terminal
-      // This ensures that data coming from the WebSocket server is shown in the terminal
       terminal.current.write(event.data);
     };
 
@@ -100,36 +116,45 @@ const App = () => {
       terminal.current.writeln('Disconnected from WebSocket server.');
       setIsConnected(false);
     };
-
-    // Handle terminal input and send it over WebSocket
-    terminal.current.onData((data) => {
-      // Send input data over WebSocket without echoing it back to the terminal
-      if (socket.current && socket.current.readyState === WebSocket.OPEN) {
-        socket.current.send(data); // Only send to WebSocket, no echo
-      }
-    });
   };
 
-  const handleInputChange = (event, setState, isNumber = false) => {
+  const handleInputChange = (event, setState) => {
-    let value = event.target.value;
+    setState(event.target.value);
-
-    if (isNumber) {
-      value = Number(value); // Convert to number if it's a number field
-      if (isNaN(value)) {
-        value = ''; // Optional: set an empty string if the input is invalid
-      }
-    }
-
-    setState(value); // Set the state with the appropriate value
   };
 
   const handleSideBarHiding = () => {
-    setIsSideBarHidden((prevState) => !prevState);
+    setIsSideBarHidden((prevState) => {
+      const newState = !prevState;
+      if (newState) {
+        setTimeout(() => {
+          // Add a delay to ensure layout settles before resize action
+          fitAddon.current.fit();
+          if (socket.current && socket.current.readyState === WebSocket.OPEN) {
+            socket.current.send(JSON.stringify({
+              cols: terminal.current.cols,
+              rows: terminal.current.rows,
+            }));
+          }
+        }, 100); // Delay of 100 milliseconds
+      } else {
+        setTimeout(() => {
+          // Refit terminal when showing sidebar as well
+          fitAddon.current.fit();
+          if (socket.current && socket.current.readyState === WebSocket.OPEN) {
+            socket.current.send(JSON.stringify({
+              cols: terminal.current.cols,
+              rows: terminal.current.rows,
+            }));
+          }
+        }, 100); // Delay of 100 milliseconds
+      }
+      return newState;
+    });
   };
 
   return (
       <div className="app-container">
-        <div className={`main-content ${isSideBarHidden ? 'with-sidebar-hidden' : ''}`}>
+        <div className="main-content">
           <div className={`sidebar ${isSideBarHidden ? 'hidden' : ''}`}>
             <h2>Connection Details</h2>
             <input
@@ -139,10 +164,10 @@ const App = () => {
                 onChange={(e) => handleInputChange(e, setHost)}
             />
             <input
-                type="number"
+                type="text"
                 placeholder="Port"
                 value={port}
-                onChange={(e) => handleInputChange(e, setPort, true)}
+                onChange={(e) => handleInputChange(e, setPort)}
             />
             <input
                 type="text"

info.txt

@@ -1,6 +1,5 @@
 Currently:
-make the cmds run at start not show up
+all done for release!
-auto resize the terminal via cmds after the browser window size has changed or +/- clicked
 
 Overall Features:
 SSH/RDP(?)/VNC(?)