terminal-expose 1.1.0 → 1.2.1

package/README.md

@@ -34,15 +34,15 @@ terminal-expose bash -lc "npm test"
 The CLI prints a URL like:
 
 ```text
-Local URL : http://localhost:3000/s/<token>
-LAN URL   : http://192.168.1.10:3000/s/<token>
+Local URL : http://localhost:5555/s/<token>
+LAN URL   : http://192.168.1.10:5555/s/<token>
 ```
 
 Share the full token URL with your collaborators. They will have full read and write access to the terminal.
 
 ## Public Internet Access
 
-For quick public sharing, start a localtunnel:
+For quick public sharing, start a secure edge tunnel (powered by Cloudflare Quick Tunnels):
 
 ```sh
 terminal-expose --public bash
@@ -51,22 +51,17 @@ terminal-expose --public bash
 The CLI prints a URL like:
 
 ```text
-Public URL: https://random-name.loca.lt/s/<token>
-Tunnel password: <localtunnel-password>
+Public URL: https://random-name.trycloudflare.com/s/<token>
 ```
 
-You can request a custom localtunnel subdomain:
+_(Note: Custom subdomains are not currently supported by free Cloudflare Quick Tunnels.)_
 
-```sh
-terminal-expose --public --subdomain my-terminal-demo bash
-```
-
-The tunnel URL works outside your Wi-Fi as long as the CLI is still running. If `loca.lt` asks the user for a tunnel password, share the printed tunnel password too.
+The tunnel URL works outside your Wi-Fi as long as the CLI is still running.
 
-For a permanent setup, run it on a public server or forward TCP port `3000` to the machine running the CLI:
+For a permanent setup, run it on a public server or forward TCP port 5555 to the machine running the CLI:
 
 ```sh
-EXTERNAL_URL="http://YOUR_PUBLIC_IP:3000" terminal-expose bash
+EXTERNAL_URL="http://YOUR_PUBLIC_IP:5555" terminal-expose bash
 ```
 
 ## Options
@@ -77,7 +72,6 @@ Use environment variables:
 PORT=4000 terminal-expose bash
 SESSION_TOKEN="change-this-secret" terminal-expose bash
 PUBLIC_TUNNEL=1 terminal-expose bash
-TUNNEL_SUBDOMAIN="my-terminal-demo" PUBLIC_TUNNEL=1 terminal-expose bash
 TERM_COLS=160 TERM_ROWS=48 terminal-expose bash
 ```
 

package/index.js

@@ -26,23 +26,18 @@ Examples:
   terminal-expose zsh
   terminal-expose bash -lc "cd ~/project && npm test"
   terminal-expose --public bash
-  terminal-expose --public --subdomain my-demo bash
 
 Environment:
-  PORT=3000
+  PORT=5555
   HOST=0.0.0.0
   SESSION_TOKEN=<custom-token>
-  EXTERNAL_URL=http://YOUR_PUBLIC_IP:3000
+  EXTERNAL_URL=http://YOUR_PUBLIC_IP:5555
   PUBLIC_TUNNEL=1
-  TUNNEL_SUBDOMAIN=my-demo
-  TUNNEL_HOST=https://localtunnel.me
   TERM_COLS=120
   TERM_ROWS=40
 
 Options:
   --public, --tunnel          Create a public HTTPS tunnel.
-  --subdomain <name>          Request a localtunnel subdomain.
-  --tunnel-host <url>         Use a different localtunnel server.
 `);
   process.exit(0);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminal-expose",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Interactive terminal session sharing over HTTP and WebSocket.",
   "main": "index.js",
   "bin": {
@@ -8,8 +8,7 @@
   },
   "files": [
     "index.js",
-    "src",
-    "public"
+    "src"
   ],
   "scripts": {
     "start": "node index.js",
@@ -33,13 +32,8 @@
   },
   "dependencies": {
     "express": "^5.2.1",
-    "localtunnel": "^2.0.2",
     "node-pty": "^1.1.0",
-    "socket.io": "^4.8.3"
-  },
-  "overrides": {
-    "localtunnel": {
-      "axios": "^1.16.1"
-    }
+    "socket.io": "^4.8.3",
+    "untun": "^0.1.3"
   }
 }

package/src/config/env.js

@@ -1,6 +1,6 @@
 const crypto = require("crypto");
 
-const PORT = Number(process.env.PORT || 1111);
+const PORT = Number(process.env.PORT || 5555);
 const HOST = process.env.HOST || "0.0.0.0";
 const MAX_BUFFER = Number(process.env.MAX_BUFFER || 100000);
 const ECHO_TO_STDOUT = process.env.ECHO_TO_STDOUT !== "0";

package/src/core/terminal.js

@@ -15,8 +15,6 @@ class TerminalSession {
 
     this.shell = pty.spawn(shellCommand, shellArgs, {
       name: "xterm-256color",
-      // cols: TERM_COLS,
-      // rows: TERM_ROWS,
       cwd: WORKDIR,
       env: {
         ...process.env,
@@ -24,33 +22,40 @@ class TerminalSession {
       },
     });
 
+    // 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 command exited: code=${exitCode} signal=${signal}`);
+      console.log(`Terminal-Expose exited: code=${exitCode} signal=${signal}`);
 
       if (process.stdin.isTTY) {
         process.stdin.setRawMode(false);

package/src/core/tunnel.js

@@ -1,96 +1,40 @@
-const https = require("https");
-const localtunnel = require("localtunnel");
-
-function getLocaltunnelPassword() {
-  return new Promise((resolve) => {
-    let settled = false;
-
-    function finish(value) {
-      if (settled) {
-        return;
-      }
-
-      settled = true;
-      resolve(value);
-    }
-
-    const request = https.get(
-      "https://loca.lt/mytunnelpassword",
-      (response) => {
-        if (response.statusCode !== 200) {
-          response.resume();
-          finish(null);
-          return;
-        }
-
-        let body = "";
-        response.setEncoding("utf8");
-        response.on("data", (chunk) => {
-          body += chunk;
-        });
-        response.on("end", () => {
-          finish(body.trim() || null);
-        });
-      },
-    );
-
-    request.setTimeout(3000, () => {
-      request.destroy();
-      finish(null);
-    });
-
-    request.on("error", () => {
-      finish(null);
-    });
-  });
-}
+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;
-  const tunnelOptions = {
-    port: PORT,
-    local_host: localHost,
-  };
 
-  if (options.tunnelSubdomain) {
-    tunnelOptions.subdomain = options.tunnelSubdomain;
-  }
-
-  if (options.tunnelHost) {
-    tunnelOptions.host = options.tunnelHost;
+  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...");
-
-  const tunnel = await localtunnel(tunnelOptions);
-  const publicUrl = `${tunnel.url.replace(/\/$/, "")}/s/${SESSION_TOKEN}`;
-
-  console.log(`Public URL: ${publicUrl}`);
-
-  if (new URL(tunnel.url).hostname.endsWith(".loca.lt")) {
-    const password = await getLocaltunnelPassword();
+  console.log("Public tunnel: starting cloudflared...");
 
-    if (password) {
-      console.log(`Tunnel password: ${password}`);
-    }
-  }
+  try {
+    const tunnel = await startTunnel({
+      port: PORT,
+      hostname: localHost,
+      acceptCloudflareNotice: true,
+    });
 
-  tunnel.on("error", (error) => {
-    console.error(`Public tunnel error: ${error.message}`);
-  });
+    const url = await tunnel.getURL();
+    const publicUrl = `${url.replace(/\/$/, "")}/s/${SESSION_TOKEN}`;
 
-  tunnel.on("close", () => {
-    console.log("Public tunnel closed.");
-  });
+    console.log(`Public URL: ${publicUrl}`);
 
-  ["SIGINT", "SIGTERM"].forEach((signal) => {
-    process.once(signal, () => {
-      tunnel.close();
-      process.kill(process.pid, signal);
+    ["SIGINT", "SIGTERM"].forEach((signal) => {
+      process.once(signal, async () => {
+        await tunnel.close();
+        process.kill(process.pid, signal);
+      });
     });
-  });
 
-  return tunnel;
+    return tunnel;
+  } catch (error) {
+    console.error(`Public tunnel error: ${error.message}`);
+    throw error;
+  }
 }
 
 module.exports = { startPublicTunnel };

package/src/server/app.js

@@ -1,14 +1,9 @@
 const express = require("express");
-const path = require("path");
 const { SESSION_TOKEN } = require("../config/env");
-const { VIEWER_HTML } = require("../templates/viewer");
 
 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>
@@ -37,7 +32,8 @@ function createApp(ioGetter, terminalSession) {
       return res.status(403).send("Invalid session token");
     }
 
-    res.type("html").send(VIEWER_HTML);
+    const viewerHtml = require("../templates/viewer.js");
+    res.type("html").send(viewerHtml);
   });
 
   return app;

package/src/templates/viewer.js

@@ -1,95 +1,483 @@
-const VIEWER_HTML = String.raw`<!doctype html>
-<html>
+module.exports = `<!doctype html>
+<html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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" />
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css"
+    />
+
     <style>
+      * {
+        box-sizing: border-box;
+      }
+
       html,
       body {
-        margin: 0;
-        padding: 0;
-        background: #050505;
-        color: #f2f2f2;
         width: 100%;
         height: 100%;
+        margin: 0;
+
         overflow: hidden;
+
+        background: #09090b;
+        color: #ffffff;
+
+        font-family:
+          Inter,
+          system-ui,
+          sans-serif;
       }
 
-      #terminal {
-        width: 100vw;
+
+      /* ======================
+         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 id="terminal"></div>
+    <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 = window.location.pathname.split('/').filter(Boolean).pop();
-      const term = new Terminal({
-        cursorBlink: true,
-        convertEol: true,
-        fontFamily: '"JetBrains Mono", "SFMono-Regular", Consolas, monospace',
-        fontSize: 14,
-        scrollback: 10000,
-        theme: {
-          background: '#050505',
-          foreground: '#f4f4f5',
-          cursor: '#f4f4f5',
-          black: '#18181b',
-          red: '#ef4444',
-          green: '#22c55e',
-          yellow: '#eab308',
-          blue: '#3b82f6',
-          magenta: '#a855f7',
-          cyan: '#06b6d4',
-          white: '#e4e4e7'
-        }
-      });
 
-      const fitAddon = new FitAddon.FitAddon();
-      term.loadAddon(fitAddon);
 
-      term.open(document.getElementById('terminal'));
+      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 },
-        reconnectionAttempts: 10,
-        timeout: 5000
-      });
-
-      window.addEventListener('resize', () => {
-        fitAddon.fit();
-        socket.emit('terminal-resize', { cols: term.cols, rows: term.rows });
-      });
-
-      socket.on('connect', () => {
-        socket.emit('terminal-resize', { cols: term.cols, rows: term.rows });
-      });
-
-      socket.on('terminal-output', (data) => {
-        term.write(data);
-      });
-
-      term.onData((data) => {
-        socket.emit('terminal-input', data);
-      });
-
-      socket.on('terminal-exit', ({ exitCode, signal }) => {
-        const suffix = signal ? 'signal ' + signal : 'exit code ' + exitCode;
-        term.writeln('\r\n[Command ended: ' + suffix + ']');
-      });
+
+
+      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>`;
-
-module.exports = { VIEWER_HTML };
+</html>
+`;