Added ARM support

src/App.css

@@ -44,6 +44,8 @@
   border-radius: 4px;
   padding: 4px;
   flex-shrink: 0; /* Prevent tabs from shrinking */
+  text-align: center;
+  vertical-align: center;
 }
 
 .tab-item button {
@@ -54,13 +56,24 @@
   cursor: pointer;
 }
 
+.tab-item button:hover {
+  background: #1a1a1a;
+  border: white 1px solid;
+}
+
 .tab-close {
   padding: 2px 6px !important;
-  border-radius: 50%;
+  border-radius: 20%;
+  text-align: center;
+  vertical-align: center;
+  font-weight: bold;
+  line-height: 1;
+  cursor: pointer;
 }
 
 .tab-close:hover {
-  background: #ff5555 !important;
+  background: #1a1a1a !important;
+  border: white 1px solid;
 }
 
 .active-tab {

src/Terminal.jsx

@@ -7,6 +7,7 @@ import PropTypes from "prop-types";
 
 export function NewTerminal({ hostConfig }) {
     const terminalRef = useRef(null);
+    const socketRef = useRef(null);
 
     useEffect(() => {
         if (!hostConfig || !terminalRef.current) return;
@@ -46,8 +47,8 @@ export function NewTerminal({ hostConfig }) {
             fitAddon.fit();
             const { cols, rows } = terminal;
 
-            if (socket) {
-                socket.emit("resize", { cols, rows });
+            if (socketRef.current) {
+                socketRef.current.emit("resize", { cols, rows });
                 console.log(`Terminal resized: cols=${cols}, rows=${rows}`);
             }
         };
@@ -71,31 +72,36 @@ export function NewTerminal({ hostConfig }) {
         const isSecure = window.location.protocol === "https:";
         let ioUrl = `${isSecure ? "https" : "http"}://${window.location.hostname}:8081/socket.io/`;
 
-        if(window.location.hostname === "localhost") {
+        if (window.location.hostname === "localhost") {
             ioUrl = "http://localhost:8081";
         }
 
         const socket = io(ioUrl);
+        socketRef.current = socket;
+
+        socket.off("connect");
+        socket.off("data");
+        socket.off("disconnect");
 
-        // Emit hostConfig to start SSH connection
         socket.on("connect", () => {
             fitAddon.fit();
             resizeTerminal(); // Ensure proper size on connection
             const { cols, rows } = terminal;
             socket.emit("connectToHost", cols, rows, hostConfig);
             terminal.write("\r\n*** Connected to backend ***\r\n");
+        });
 
-            terminal.onKey((key) => {
-                socket.emit("data", key.key);
-            });
+        socket.on("data", (data) => {
+            terminal.write(data);
+        });
 
-            socket.on("data", (data) => {
-                terminal.write(data);
-            });
+        socket.on("disconnect", () => {
+            terminal.write("\r\n*** Disconnected from backend ***\r\n");
+        });
 
-            socket.on("disconnect", () => {
-                terminal.write("\r\n*** Disconnected from backend ***\r\n");
-            });
+        // Capture and send keystrokes
+        terminal.onKey(({ key }) => {
+            socket.emit("data", key);
         });
 
         // Cleanup on component unmount

src/index.css

@@ -47,7 +47,7 @@ button {
   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  border-color: #ffffff;
 }
 button:focus,
 button:focus-visible {