Initial version 1.1

src/.gitignore

@@ -0,0 +1,149 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.bash_history
+.bashrc
+.init_done
+.profile
+.sudo_as_admin_successful
+.wget-hsts
+.git-credentials
+.docker/
+.bash_logout
+
+# VSCode Files
+.vscode-server/
+
+# Configs
+.config/
+
+# .dotnet
+.dotnet/
+
+# .local
+.local/

src/App.css

@@ -0,0 +1,144 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.sidebar {
+  display: flex;
+  flex-shrink: 1;
+  flex-grow: 1;
+  flex-direction: column;
+  gap: 0.5em;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  height: 100vh;
+  padding: 2em;
+  width: 10em;
+  background-color: #323232;
+  font-size: 16px;
+}
+
+.topbar {
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 1;
+  flex-direction: row;
+  position: fixed;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  padding: 30px;
+  background-color: #323232;
+  top: 0;
+  left: 14em;
+  right: 0;
+  width: calc(100% - 14em);
+  min-height: 36px;
+  height: auto;
+  font-size: 16px;
+  gap: 0.5em;
+  overflow-x: auto;
+}
+
+.topbar button {
+  padding: 0.5em 1em;
+  background-color: #444;
+  border: none;
+  border-radius: 4px;
+  color: white;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.topbar button.active-tab {
+  background-color: #1a1a1a;
+  border-bottom: 2px solid white;
+}
+
+.terminal-tab {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: none;
+}
+
+.terminal-tab.active {
+  display: block;
+}
+
+.add-host {
+  display: flex;
+  flex-shrink: 1;
+  flex-grow: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 200px;
+  height: 375px;
+  transform: translate(-50%, -50%);
+  gap: 0.5em;
+  padding: 1em;
+  z-index: 1;
+  background-color: #323232;
+  box-shadow: #1a1a1a 0 0 1em;
+  border-radius: 8px;
+}
+
+.add-host-close {
+  position: absolute;
+  top: -7px;
+  right: 5px;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  text-align: center;
+  font-size: 12px;
+  border-radius: 4px;
+}
+
+.add-host h2 {
+  margin: 0.2em;
+}
+
+.add-host input {
+  margin-top: 0.1em;
+}
+
+.add-host button {
+  margin-top: 1em;
+}
+
+.add-host.hidden {
+  display: none;
+}
+
+.terminal-wrapper {
+  position: fixed;
+  top: 96px;
+  left: 14em;
+  right: 0;
+  bottom: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: #1c1c1c;
+  text-align: left;
+}
+
+.terminal-container {
+  width: 100%;
+  height: 100%;
+  border: none;
+  text-align: left;
+}

src/App.jsx

@@ -0,0 +1,102 @@
+import { useState } from "react";
+import "./App.css";
+import { NewTerminal } from "./Terminal.jsx";
+
+function App() {
+    const [isAddHostHidden, setIsAddHostHidden] = useState(true);
+    const [terminals, setTerminals] = useState([]);
+    const [activeTab, setActiveTab] = useState(null);
+    const [nextId, setNextId] = useState(1);
+    const [form, setForm] = useState({ name: "", ip: "", user: "", password: "", port: "22" });
+
+    const handleAddHost = () => {
+        if (form.ip && form.user && form.password && form.port) {
+            const newTerminal = {
+                id: nextId,
+                title: form.name || form.ip,
+                hostConfig: {
+                    ip: form.ip,
+                    user: form.user,
+                    password: form.password,
+                    port: form.port,
+                },
+            };
+            setTerminals([...terminals, newTerminal]);
+            setActiveTab(nextId);
+            setNextId(nextId + 1);
+            setIsAddHostHidden(true);
+            setForm({ name: "", ip: "", user: "", password: "", port: "22" });
+        } else {
+            alert("Please fill out all fields.");
+        }
+    };
+
+    return (
+        <>
+            <div className="sidebar">
+                <h2>Termix</h2>
+                <button onClick={() => setIsAddHostHidden(!isAddHostHidden)}>Create Host</button>
+            </div>
+            <div className="topbar">
+                {terminals.map((terminal) => (
+                    <button
+                        key={terminal.id}
+                        onClick={() => setActiveTab(terminal.id)}
+                        className={activeTab === terminal.id ? "active-tab" : ""}
+                    >
+                        {terminal.title}
+                    </button>
+                ))}
+            </div>
+            <div className="terminal-wrapper">
+                {terminals.map((terminal) => (
+                    <div
+                        key={terminal.id}
+                        className={`terminal-tab ${terminal.id === activeTab ? "active" : ""}`}
+                    >
+                        {terminal.hostConfig && <NewTerminal hostConfig={terminal.hostConfig} />}
+                    </div>
+                ))}
+            </div>
+            <div className={`add-host ${isAddHostHidden ? "hidden" : ""}`}>
+                <h2>Add Host</h2>
+                <button onClick={() => setIsAddHostHidden(true)} className="add-host-close">
+                    ×
+                </button>
+                <input
+                    type="text"
+                    placeholder="Host Name"
+                    value={form.name}
+                    onChange={(e) => setForm({ ...form, name: e.target.value })}
+                />
+                <input
+                    type="text"
+                    placeholder="Host IP"
+                    value={form.ip}
+                    onChange={(e) => setForm({ ...form, ip: e.target.value })}
+                />
+                <input
+                    type="text"
+                    placeholder="Host User"
+                    value={form.user}
+                    onChange={(e) => setForm({ ...form, user: e.target.value })}
+                />
+                <input
+                    type="password"
+                    placeholder="Host Password"
+                    value={form.password}
+                    onChange={(e) => setForm({ ...form, password: e.target.value })}
+                />
+                <input
+                    type="number"
+                    placeholder="Host Port"
+                    value={form.port}
+                    onChange={(e) => setForm({ ...form, port: e.target.value })}
+                />
+                <button onClick={handleAddHost}>Add</button>
+            </div>
+        </>
+    );
+}
+
+export default App;

src/Terminal.jsx

@@ -0,0 +1,125 @@
+// Terminal.jsx
+import { useEffect, useRef } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import "@xterm/xterm/css/xterm.css";
+import io from "socket.io-client";
+import PropTypes from "prop-types";
+
+export function NewTerminal({ hostConfig }) {
+    const terminalRef = useRef(null);
+
+    useEffect(() => {
+        if (!hostConfig || !terminalRef.current) return;
+
+        // Initialize terminal
+        const terminal = new Terminal({
+            cursorBlink: true,
+            cursorStyle: "block",
+            theme: { background: "#1a1a1a", foreground: "#ffffff", cursor: "#ffffff" },
+            fontSize: 14,
+            scrollback: 1000,
+        });
+
+        // Initialize FitAddon for auto-sizing
+        const fitAddon = new FitAddon();
+        terminal.loadAddon(fitAddon);
+
+        // Open terminal in the container
+        terminal.open(terminalRef.current);
+
+        // Apply fit after terminal is fully initialized
+        setTimeout(() => {
+            fitAddon.fit();
+            resizeTerminal();
+        }, 100);
+
+        // Focus on terminal and reset layout
+        terminal.focus();
+
+        // Resize terminal to fit the container
+        const resizeTerminal = () => {
+            const terminalContainer = terminalRef.current;
+            const sidebarWidth = 14 * 16; // Sidebar width in pixels
+            const topbarHeight = 96; // Topbar height in pixels
+            const availableWidth = window.innerWidth - sidebarWidth;
+            const availableHeight = window.innerHeight - topbarHeight;
+
+            terminalContainer.style.width = `${availableWidth}px`;
+            terminalContainer.style.height = `${availableHeight}px`;
+
+            fitAddon.fit();
+            const { cols, rows } = terminal;
+
+            // Emit new terminal size to the backend
+            if (socket) {
+                socket.emit("resize", { cols, rows });
+                console.log(`Terminal resized: cols=${cols}, rows=${rows}`);
+            }
+        };
+
+        // Handle window resize events
+        window.addEventListener("resize", resizeTerminal);
+
+        // Write initial connection message
+        terminal.write("\r\n*** Connecting to backend ***\r\n");
+
+        // Create the socket connection with the provided hostConfig
+        const socket = io("http://localhost:8081");
+
+        // Emit the hostConfig to the server to start SSH connection
+        fitAddon.fit();
+        const { cols, rows } = terminal;
+        socket.emit("connectToHost", cols, rows, hostConfig);
+
+        // Handle socket connection events
+        socket.on("connect", () => {
+            terminal.write("\r\n*** Connected to backend ***\r\n");
+
+            // Send keystrokes to the backend
+            terminal.onKey((key) => {
+                socket.emit("data", key.key);
+            });
+
+            // Display output from the backend
+            socket.on("data", (data) => {
+                terminal.write(data);
+            });
+
+            // Handle disconnection
+            socket.on("disconnect", () => {
+                terminal.write("\r\n*** Disconnected from backend ***\r\n");
+            });
+        });
+
+        // Cleanup on component unmount
+        return () => {
+            terminal.dispose();
+            window.removeEventListener("resize", resizeTerminal);
+            socket.disconnect();
+        };
+    }, [hostConfig]); // Re-run effect when hostConfig changes
+
+    return (
+        <div
+            ref={terminalRef}
+            style={{
+                width: "100%",
+                height: "100%",
+                minHeight: "400px",
+                overflow: "hidden",
+                textAlign: "left",
+            }}
+        />
+    );
+}
+
+// Prop validation using PropTypes
+NewTerminal.propTypes = {
+    hostConfig: PropTypes.shape({
+        ip: PropTypes.string.isRequired,
+        user: PropTypes.string.isRequired,
+        password: PropTypes.string.isRequired,
+        port: PropTypes.string.isRequired,
+    }).isRequired,
+};

src/backend/entrypoint.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+# Start the backend server
+node /src/backend/server.cjs &
+
+# Start nginx in the foreground
+exec nginx -g 'daemon off;'

src/backend/server.cjs

@@ -0,0 +1,103 @@
+const http = require("http");
+const socketIo = require("socket.io");
+const SSHClient = require("ssh2").Client;
+
+const server = http.createServer();
+const io = socketIo(server, {
+    cors: {
+        origin: "*",
+        methods: ["GET", "POST"],
+    },
+});
+
+io.on("connection", (socket) => {
+    console.log("New socket connection established");
+
+    let currentCols = 80;
+    let currentRows = 24;
+    let stream = null;
+
+    socket.on("resize", ({ cols, rows }) => {
+        console.log(`Terminal resized: cols=${cols}, rows=${rows}`);
+        currentCols = cols;
+        currentRows = rows;
+        if (stream && stream.setWindow) {
+            stream.setWindow(rows, cols, rows * 100, cols * 100);
+            console.log(`SSH terminal resized to: cols=${cols}, rows=${rows}`);
+        }
+    });
+
+    socket.on("connectToHost", (cols, rows, hostConfig) => {
+        if (!hostConfig || !hostConfig.ip || !hostConfig.user || !hostConfig.password || !hostConfig.port) {
+            console.error("Invalid hostConfig received:", hostConfig);
+            return;
+        }
+
+        console.log("Received hostConfig:", hostConfig);
+        const { ip, port, user, password } = hostConfig;
+
+        if (!ip || !port || !user || !password) {
+            socket.emit("data", "\r\n*** Missing required connection data ***\r\n");
+            return;
+        }
+
+        console.log("Preparing to connect to host:", hostConfig);
+        const conn = new SSHClient();
+
+        conn
+            .on("ready", function () {
+                console.log("SSH connection established");
+                socket.emit("data", "\r\n*** SSH CONNECTION ESTABLISHED ***\r\n");
+                conn.shell(function (err, newStream) {
+                    if (err) {
+                        console.error("Error opening SSH shell:", err);
+                        return socket.emit(
+                            "data",
+                            "\r\n*** SSH SHELL ERROR: " + err.message + " ***\r\n"
+                        );
+                    }
+                    stream = newStream;
+
+                    stream.setWindow(currentRows, currentCols, currentRows * 100, currentCols * 100);
+
+                    socket.on("data", function (data) {
+                        stream.write(data);
+                    });
+
+                    stream
+                        .on("data", function (d) {
+                            socket.emit("data", d.toString("binary"));
+                        })
+                        .on("close", function () {
+                            console.log("SSH stream closed");
+                            conn.end();
+                        });
+                });
+            })
+            .on("close", function () {
+                console.log("SSH connection closed");
+                socket.emit("data", "\r\n*** SSH CONNECTION CLOSED ***\r\n");
+            })
+            .on("error", function (err) {
+                console.error("SSH connection error:", err);
+                socket.emit(
+                    "data",
+                    "\r\n*** SSH CONNECTION ERROR: " + err.message + " ***\r\n"
+                );
+            })
+            .connect({
+                host: ip,
+                port: port,
+                username: user,
+                password: password,
+            });
+    });
+
+    socket.on("disconnect", () => {
+        console.log("Client disconnected");
+    });
+});
+
+server.listen(8081, () => {
+    console.log("Server is running on port 8081");
+});

src/index.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+input {
+  border-radius: 8px;
+  border: 1px solid #1a1a1a;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  color: #ffffff;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)