terminal-expose 1.0.0 → 1.2.0

package/src/core/socket.js

@@ -0,0 +1,56 @@
+const { Server } = require("socket.io");
+const { SESSION_TOKEN } = require("../config/env");
+
+function setupSocket(server, terminalSession) {
+  const io = new Server(server, {
+    cors: {
+      origin: false,
+    },
+  });
+
+  io.use((socket, next) => {
+    const token = socket.handshake.auth?.token;
+
+    if (token !== SESSION_TOKEN) {
+      return next(new Error("unauthorized"));
+    }
+
+    return next();
+  });
+
+  io.on("connection", (socket) => {
+    console.log(`Client connected: ${socket.id}`);
+
+    if (terminalSession.buffer) {
+      socket.emit("terminal-output", terminalSession.buffer);
+    }
+
+    if (terminalSession.exit) {
+      socket.emit("terminal-exit", terminalSession.exit);
+    }
+
+    socket.on("terminal-input", (data) => {
+      terminalSession.write(data);
+    });
+
+    socket.on("terminal-resize", ({ cols, rows }) => {
+      terminalSession.resize(cols, rows);
+    });
+
+    socket.on("disconnect", () => {
+      console.log(`Client disconnected: ${socket.id}`);
+    });
+  });
+
+  terminalSession.on("data", (data) => {
+    io.emit("terminal-output", data);
+  });
+
+  terminalSession.on("exit", (exitState) => {
+    io.emit("terminal-exit", exitState);
+  });
+
+  return io;
+}
+
+module.exports = { setupSocket };

package/src/core/terminal.js

@@ -0,0 +1,93 @@
+const pty = require("node-pty");
+const {
+  ECHO_TO_STDOUT,
+  MAX_BUFFER,
+  TERM_COLS,
+  TERM_ROWS,
+  WORKDIR,
+} = require("../config/env");
+
+class TerminalSession {
+  constructor(shellCommand, shellArgs) {
+    this.buffer = "";
+    this.exit = null;
+    this.listeners = [];
+
+    this.shell = pty.spawn(shellCommand, shellArgs, {
+      name: "xterm-256color",
+      cwd: WORKDIR,
+      env: {
+        ...process.env,
+        TERM: "xterm-256color",
+      },
+    });
+
+    // verify if terminal was available or not bro
+    if (process.stdin.isTTY) {
+      // listening to every stroke of host terminal input
+      process.stdin.setRawMode(true);
+    }
+    process.stdin.resume();
+
+    // write to shell after getting the input from host terminal
+    process.stdin.on("data", (data) => {
+      this.shell.write(data);
+    });
+
+    // after getting the data from shell writing it to host terminal
+    this.shell.onData((data) => {
+      if (ECHO_TO_STDOUT) {
+        // this write the user input to the host terminal
+        process.stdout.write(data);
+      }
+
+      this.buffer += data;
+      if (this.buffer.length > MAX_BUFFER) {
+        this.buffer = this.buffer.slice(-MAX_BUFFER);
+      }
+
+      // ! need to verify it was need or not
+      this.emit("data", data);
+    });
+
+    // if the terminal was exited in host machine exit the process and inform the listeing clients
+    this.shell.onExit(({ exitCode, signal }) => {
+      this.exit = { exitCode, signal };
+      this.emit("exit", this.exit);
+
+      console.log(`Terminal-Expose exited: code=${exitCode} signal=${signal}`);
+
+      if (process.stdin.isTTY) {
+        process.stdin.setRawMode(false);
+      }
+    });
+  }
+
+  write(data) {
+    if (this.shell) {
+      this.shell.write(data);
+    }
+  }
+
+  resize(cols, rows) {
+    if (this.shell && cols && rows) {
+      try {
+        this.shell.resize(cols, rows);
+      } catch (err) {
+        console.error("Failed to resize terminal", err);
+      }
+    }
+  }
+
+  on(event, callback) {
+    this.listeners.push({ event, callback });
+  }
+
+  emit(event, data) {
+    this.listeners
+      .filter((listener) => listener.event === event)
+      .forEach((listener) => listener.callback(data));
+  }
+}
+
+module.exports = { TerminalSession };

package/src/core/tunnel.js

@@ -0,0 +1,40 @@
+const { startTunnel } = require("untun");
+
+async function startPublicTunnel(options, { HOST, PORT, SESSION_TOKEN }) {
+  const localHost = HOST === "0.0.0.0" || HOST === "::" ? "127.0.0.1" : HOST;
+
+  if (options.tunnelSubdomain || options.tunnelHost) {
+    console.warn(
+      "Warning: Custom subdomain and tunnel host are not supported with Cloudflare Quick Tunnels.",
+    );
+  }
+
+  console.log("Public tunnel: starting cloudflared...");
+
+  try {
+    const tunnel = await startTunnel({
+      port: PORT,
+      hostname: localHost,
+      acceptCloudflareNotice: true,
+    });
+
+    const url = await tunnel.getURL();
+    const publicUrl = `${url.replace(/\/$/, "")}/s/${SESSION_TOKEN}`;
+
+    console.log(`Public URL: ${publicUrl}`);
+
+    ["SIGINT", "SIGTERM"].forEach((signal) => {
+      process.once(signal, async () => {
+        await tunnel.close();
+        process.kill(process.pid, signal);
+      });
+    });
+
+    return tunnel;
+  } catch (error) {
+    console.error(`Public tunnel error: ${error.message}`);
+    throw error;
+  }
+}
+
+module.exports = { startPublicTunnel };

package/src/server/app.js

@@ -0,0 +1,45 @@
+const express = require("express");
+const path = require("path");
+const { SESSION_TOKEN } = require("../config/env");
+
+function createApp(ioGetter, terminalSession) {
+  const app = express();
+
+  // We are referring to public directory in root
+  app.use("/assets", express.static(path.join(__dirname, "../../public")));
+
+  app.get("/", (_, res) => {
+    res.type("html").send(`<!doctype html>
+      <html>
+        <head>
+          <meta charset="utf-8" />
+          <title>Terminal Expose</title>
+        </head>
+        <body style="font-family: system-ui, sans-serif; line-height: 1.5; padding: 32px;">
+          <h1>Terminal Expose</h1>
+          <p>This server is running. Use the private session URL printed in the container logs.</p>
+        </body>
+      </html>`);
+  });
+
+  app.get("/health", (_, res) => {
+    const io = ioGetter();
+    res.json({
+      ok: true,
+      clients: io ? io.engine.clientsCount : 0,
+      exited: terminalSession.exit,
+    });
+  });
+
+  app.get("/s/:token", (req, res) => {
+    if (req.params.token !== SESSION_TOKEN) {
+      return res.status(403).send("Invalid session token");
+    }
+
+    res.sendFile(path.join(__dirname, "../templates/viewer.html"));
+  });
+
+  return app;
+}
+
+module.exports = { createApp };

package/src/templates/viewer.html

@@ -0,0 +1,482 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Terminal Session</title>
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css"
+    />
+
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+
+        overflow: hidden;
+
+        background: #09090b;
+        color: #ffffff;
+
+        font-family:
+          Inter,
+          system-ui,
+          sans-serif;
+      }
+
+
+      /* ======================
+         Layout
+      ====================== */
+
+      .app {
+        height: 100vh;
+
+        display: flex;
+        flex-direction: column;
+      }
+
+
+      /* ======================
+         Header
+      ====================== */
+
+      .header {
+        height: 48px;
+
+        padding: 0 16px;
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        background:
+          linear-gradient(
+            180deg,
+            #18181b,
+            #09090b
+          );
+
+        border-bottom: 1px solid #27272a;
+
+        user-select: none;
+      }
+
+
+      .title {
+        font-size: 14px;
+        font-weight: 500;
+
+        color: #e4e4e7;
+      }
+
+
+      .actions {
+        display: flex;
+        align-items: center;
+
+        gap: 14px;
+
+        font-size: 13px;
+      }
+
+
+
+      /* ======================
+         Status
+      ====================== */
+
+
+      .status {
+        display: flex;
+        align-items: center;
+
+        gap: 6px;
+      }
+
+
+      .status-dot {
+        width: 9px;
+        height: 9px;
+
+        border-radius: 999px;
+
+        background: currentColor;
+
+        box-shadow:
+          0 0 12px currentColor;
+      }
+
+
+      .connected {
+        color: #22c55e;
+      }
+
+
+      .connecting {
+        color: #f97316;
+      }
+
+
+      .disconnected {
+        color: #ef4444;
+      }
+
+
+
+      /* ======================
+         Buttons
+      ====================== */
+
+
+      button {
+        padding: 5px 10px;
+
+        cursor: pointer;
+
+        background: #18181b;
+        color: #e4e4e7;
+
+        border:
+          1px solid #3f3f46;
+
+        border-radius: 6px;
+      }
+
+
+      button:hover {
+        background: #27272a;
+      }
+
+
+
+
+      /* ======================
+         Terminal
+      ====================== */
+
+
+      #terminal {
+        flex: 1;
+
+        padding: 12px;
+
+        overflow: hidden;
+      }
+
+
+      .xterm {
+        height: 100%;
+      }
+
+
+
+      /* ======================
+         Scrollbar
+      ====================== */
+
+
+      .xterm-viewport::-webkit-scrollbar {
+        width: 8px;
+      }
+
+
+      .xterm-viewport::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+
+      .xterm-viewport::-webkit-scrollbar-thumb {
+        background: #3f3f46;
+
+        border-radius: 20px;
+      }
+
+
+      .xterm-viewport::-webkit-scrollbar-thumb:hover {
+        background: #71717a;
+      }
+
+
+
+      @media(max-width: 600px) {
+
+        .title {
+          font-size: 12px;
+        }
+
+
+        .actions {
+          gap: 8px;
+        }
+
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="app">
+      <header class="header">
+        <div class="title">⚡ Remote Terminal</div>
+
+        <div class="actions">
+          <span id="timer"> 00:00 </span>
+
+          <div id="status" class="status connecting">
+            <span class="status-dot"></span>
+
+            <span id="statusText"> Connecting </span>
+          </div>
+
+          <button id="fullscreen">⛶</button>
+        </div>
+      </header>
+
+      <main id="terminal"></main>
+    </div>
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit/lib/xterm-addon-fit.js"></script>
+
+    <script>
+
+
+      const token =
+        location.pathname
+          .split("/")
+          .filter(Boolean)
+          .pop();
+
+
+
+      const term =
+        new Terminal({
+          cursorBlink: true,
+          convertEol: true,
+          fontFamily:
+            `"JetBrains Mono", monospace`,
+          fontSize: 14,
+          lineHeight: 1.3,
+          scrollback: 20000,
+          theme: {
+            background: "#09090b",
+            foreground: "#fafafa",
+            cursor: "#22c55e",
+            selection: "#334155"
+          }
+        });
+
+
+
+      const fitAddon =
+        new FitAddon.FitAddon();
+
+
+
+      term.loadAddon(
+        fitAddon
+      );
+
+
+      term.open(
+        document.getElementById(
+          "terminal"
+        )
+      );
+
+
+      fitAddon.fit();
+
+
+
+      const socket =
+        io({
+          auth:{
+            token
+          },
+          reconnection: true,
+          reconnectionAttempts:20,
+          timeout:5000
+        });
+
+      const statusBox =
+        document.getElementById(
+          "status"
+        );
+
+      const statusText =
+        document.getElementById(
+          "statusText"
+        );
+
+
+      function setStatus(
+        text,
+        type
+      ){
+        statusBox.className =
+          "status " + type;
+        statusText.textContent =
+          text;
+
+      }
+
+
+
+
+      socket.on(
+        "connect",
+        () => {
+
+          setStatus(
+            "Connected",
+            "connected"
+          );
+
+
+          socket.emit(
+            "terminal-resize",
+            {
+              cols: term.cols,
+              rows: term.rows
+            }
+          );
+
+        }
+      );
+
+
+
+
+
+      socket.on(
+        "disconnect",
+        () => {
+
+          setStatus(
+            "Disconnected",
+            "disconnected"
+          );
+
+        }
+      );
+
+
+
+
+      socket.io.on(
+        "reconnect_attempt",
+        () => {
+
+          setStatus(
+            "Reconnecting",
+            "connecting"
+          );
+
+        }
+      );
+
+
+
+
+      socket.on(
+        "terminal-output",
+        data => {
+
+          term.write(data);
+
+        }
+      );
+
+
+
+
+
+      term.onData(
+        data => {
+
+          socket.emit(
+            "terminal-input",
+            data
+          );
+
+        }
+      );
+
+
+
+
+      window.addEventListener(
+        "resize",
+        () => {
+
+          fitAddon.fit();
+
+
+          socket.emit(
+            "terminal-resize",
+            {
+              cols: term.cols,
+              rows: term.rows
+            }
+          );
+
+        }
+      );
+
+
+
+
+
+      let seconds = 0;
+
+
+      setInterval(
+        () => {
+
+          if(!socket.connected)
+            return;
+
+
+          seconds++;
+
+
+          timer.textContent =
+            new Date(
+              seconds * 1000
+            )
+            .toISOString()
+            .substring(
+              14,
+              19
+            );
+
+
+        },
+        1000
+      );
+
+
+
+
+
+      fullscreen.onclick =
+        () => {
+
+          document.documentElement
+            .requestFullscreen();
+
+        };
+    </script>
+  </body>
+</html>