termbeam 0.0.3 → 0.0.5

package/README.md

@@ -12,63 +12,13 @@
 Access your terminal from your phone, tablet, or any browser.
 Multi-session, mobile-optimized, with touch controls.
 
-[Getting Started](#-quick-start) · [Screenshots](#-screenshots) · [Documentation](https://dorlugasigal.github.io/TermBeam/) · [Contributing](CONTRIBUTING.md)
+[Getting Started](#-quick-start) · [Demo](#-demo) · [Documentation](https://dorlugasigal.github.io/TermBeam/) · [Contributing](CONTRIBUTING.md)
 
 </div>
 
 ---
 
-## 📸 Screenshots
-
-<!--
-  To add screenshots:
-  1. Run TermBeam: npx termbeam --generate-password
-  2. Take screenshots on your phone/browser
-  3. Save images to docs/assets/screenshots/
-  4. Uncomment the img tags below and update filenames
-
-  Recommended screenshots:
-  - session-manager.png  (main screen with session list)
-  - terminal.png         (active terminal session)
-  - folder-browser.png   (folder picker sheet)
-  - login.png            (password login screen)
-  - qr-code.png          (server startup with QR code in terminal)
--->
-
-<div align="center">
-<table>
-<tr>
-<td align="center"><strong>Session Manager</strong></td>
-<td align="center"><strong>Terminal</strong></td>
-<td align="center"><strong>Folder Browser</strong></td>
-</tr>
-<tr>
-<td>
-
-<!-- ![Session Manager](docs/assets/screenshots/session-manager.png) -->
-
-_Manage multiple terminal sessions with swipe-to-delete_
-
-</td>
-<td>
-
-<!-- ![Terminal](docs/assets/screenshots/terminal.png) -->
-
-_Full terminal with touch controls and Nerd Font rendering_
-
-</td>
-<td>
-
-<!-- ![Folder Browser](docs/assets/screenshots/folder-browser.png) -->
-
-_Visual directory picker for working directory_
-
-</td>
-</tr>
-</table>
-</div>
-
-> **💡 Screenshots coming soon!** Run `npx termbeam` and see for yourself.
+https://github.com/user-attachments/assets/c91ca15d-0c84-400f-bbfa-3d58d1be07ee
 
 ## ✨ Features
 
@@ -115,6 +65,12 @@ termbeam --password mysecret
 termbeam --tunnel --generate-password
 ```
 
+> Requires the [Azure Dev Tunnels CLI](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started):
+>
+> - **Windows:** `winget install Microsoft.devtunnel`
+> - **macOS:** `brew install --cask devtunnel`
+> - **Linux:** `curl -sL https://aka.ms/DevTunnelCliInstall | bash`
+
 ## 📖 Usage
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "termbeam",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Beam your terminal to any device — mobile-optimized web terminal with multi-session support",
   "main": "src/server.js",
   "bin": {
@@ -57,7 +57,7 @@
   "dependencies": {
     "cookie-parser": "^1.4.7",
     "express": "^5.2.1",
-    "node-pty": "1.0.0",
+    "node-pty": "^1.1.0",
     "qrcode": "^1.5.4",
     "ws": "^8.19.0"
   },

package/public/index.html

@@ -231,8 +231,18 @@
         color: #e0e0e0;
         font-size: 15px;
         outline: none;
+        -webkit-appearance: none;
+        appearance: none;
       }
-      .modal input:focus {
+      .modal select {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right 12px center;
+        padding-right: 32px;
+        cursor: pointer;
+      }
+      .modal input:focus,
+      .modal select:focus {
         border-color: #533483;
       }
       .modal-actions {
@@ -459,8 +469,12 @@
         <h2>New Session</h2>
         <label for="sess-name">Name</label>
         <input type="text" id="sess-name" placeholder="My Session" />
-        <label for="sess-shell">Shell / Command</label>
-        <input type="text" id="sess-shell" placeholder="/bin/zsh" />
+        <label for="sess-shell">Shell</label>
+        <select id="sess-shell">
+          <option value="">Loading shells…</option>
+        </select>
+        <label for="sess-cmd">Initial Command <span style="color:#666;font-weight:normal">(optional)</span></label>
+        <input type="text" id="sess-cmd" placeholder="e.g. copilot, htop, vim" />
         <label for="sess-cwd">Working Directory</label>
         <div class="cwd-picker">
           <input type="text" id="sess-cwd" placeholder="/Users/dorlugasigal" />
@@ -568,6 +582,7 @@
       }
 
       document.getElementById('new-session-btn').addEventListener('click', () => {
+        loadShells();
         modal.classList.add('visible');
       });
       document.getElementById('modal-cancel').addEventListener('click', () => {
@@ -581,11 +596,13 @@
         const name = document.getElementById('sess-name').value.trim();
         const shell = document.getElementById('sess-shell').value.trim();
         const cwd = document.getElementById('sess-cwd').value.trim();
+        const initialCommand = document.getElementById('sess-cmd').value.trim();
 
         const body = {};
         if (name) body.name = name;
         if (shell) body.shell = shell;
         if (cwd) body.cwd = cwd;
+        if (initialCommand) body.initialCommand = initialCommand;
 
         const res = await fetch('/api/sessions', {
           method: 'POST',
@@ -596,6 +613,30 @@
         location.href = data.url;
       });
 
+      // --- Shell detection ---
+      let shellsLoaded = false;
+      async function loadShells() {
+        if (shellsLoaded) return;
+        const shellSelect = document.getElementById('sess-shell');
+        try {
+          const res = await fetch('/api/shells');
+          const data = await res.json();
+          shellSelect.innerHTML = '';
+          for (const s of data.shells) {
+            const opt = document.createElement('option');
+            opt.value = s.cmd;
+            opt.textContent = `${s.name} (${s.cmd})`;
+            if (s.cmd === data.default || s.path === data.default) {
+              opt.selected = true;
+            }
+            shellSelect.appendChild(opt);
+          }
+          shellsLoaded = true;
+        } catch {
+          shellSelect.innerHTML = '<option value="">Could not detect shells</option>';
+        }
+      }
+
       // --- Swipe to delete ---
       async function deleteSession(id, e) {
         e.stopPropagation();

package/public/terminal.html

@@ -65,6 +65,11 @@
         align-items: center;
         gap: 8px;
       }
+      #status-bar .right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
       #back-btn {
         background: none;
         border: none;
@@ -76,6 +81,22 @@
       #back-btn:active {
         color: #e0e0e0;
       }
+      #stop-btn {
+        background: #e74c3c;
+        border: none;
+        color: white;
+        font-size: 11px;
+        font-weight: 600;
+        cursor: pointer;
+        padding: 4px 10px;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+      #stop-btn:active {
+        background: #c0392b;
+      }
       #status-dot {
         width: 8px;
         height: 8px;
@@ -207,8 +228,11 @@
         <span id="status-dot"></span>
         <span id="session-name">…</span>
       </div>
-      <span id="status-text">Connecting…</span>
-      <span id="version-text" style="font-size: 11px; color: #555; margin-left: 8px"></span>
+      <div class="right">
+        <span id="status-text">Connecting…</span>
+        <span id="version-text" style="font-size: 11px; color: #555"></span>
+        <button id="stop-btn" title="Stop session">■ Stop</button>
+      </div>
     </div>
 
     <div id="terminal-container"></div>
@@ -437,6 +461,15 @@
           connect();
         });
 
+        // Stop session
+        document.getElementById('stop-btn').addEventListener('click', async () => {
+          if (!confirm('Stop this session? The process will be killed.')) return;
+          try {
+            await fetch(`/api/sessions/${sessionId}`, { method: 'DELETE' });
+          } catch {}
+          location.href = '/';
+        });
+
         // Tap terminal area to toggle keyboard (intentional user action)
         container.addEventListener('click', () => term.focus());
 

package/src/cli.js

@@ -32,10 +32,61 @@ Environment:
 `);
 }
 
+function getDefaultShell() {
+  const { execFileSync } = require('child_process');
+  const ppid = process.ppid;
+  console.log(`[termbeam] Detecting shell (parent PID: ${ppid}, platform: ${os.platform()})`);
+
+  if (os.platform() === 'win32') {
+    // Detect parent process on Windows via WMIC
+    try {
+      const result = execFileSync(
+        'wmic',
+        ['process', 'where', `ProcessId=${ppid}`, 'get', 'Name', '/value'],
+        { stdio: ['pipe', 'pipe', 'ignore'], encoding: 'utf8', timeout: 3000 },
+      );
+      const match = result.match(/Name=(.+)/);
+      if (match) {
+        const name = match[1].trim().toLowerCase();
+        console.log(`[termbeam] Detected parent process: ${name}`);
+        if (name === 'pwsh.exe') return 'pwsh.exe';
+        if (name === 'powershell.exe') return 'powershell.exe';
+      }
+    } catch (err) {
+      console.log(`[termbeam] Could not detect parent process: ${err.message}`);
+    }
+    const fallback = process.env.COMSPEC || 'cmd.exe';
+    console.log(`[termbeam] Falling back to: ${fallback}`);
+    return fallback;
+  }
+
+  // Unix: detect parent shell via ps
+  try {
+    const result = execFileSync('ps', ['-o', 'comm=', '-p', String(ppid)], {
+      stdio: ['pipe', 'pipe', 'ignore'],
+      encoding: 'utf8',
+      timeout: 3000,
+    });
+    const comm = result.trim();
+    if (comm) {
+      const shell = comm.startsWith('-') ? comm.slice(1) : comm;
+      console.log(`[termbeam] Detected parent shell: ${shell}`);
+      return shell;
+    }
+  } catch (err) {
+    console.log(`[termbeam] Could not detect parent shell: ${err.message}`);
+  }
+
+  // Fallback to SHELL env or /bin/sh
+  const fallback = process.env.SHELL || '/bin/sh';
+  console.log(`[termbeam] Falling back to: ${fallback}`);
+  return fallback;
+}
+
 function parseArgs() {
   let port = parseInt(process.env.PORT || '3456', 10);
   let host = '0.0.0.0';
-  const defaultShell = process.env.SHELL || '/bin/zsh';
+  const defaultShell = getDefaultShell();
   const cwd = process.env.TERMBEAM_CWD || process.env.PTY_CWD || process.cwd();
   let password = process.env.TERMBEAM_PASSWORD || process.env.PTY_PASSWORD || null;
   let useTunnel = false;

package/src/routes.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const os = require('os');
 const fs = require('fs');
+const { detectShells } = require('./shells');
 
 const PUBLIC_DIR = path.join(__dirname, '..', 'public');
 
@@ -46,16 +47,23 @@ function setupRoutes(app, { auth, sessions, config }) {
   });
 
   app.post('/api/sessions', auth.middleware, (req, res) => {
-    const { name, shell, args: shellArgs, cwd } = req.body || {};
+    const { name, shell, args: shellArgs, cwd, initialCommand } = req.body || {};
     const id = sessions.create({
       name: name || `Session ${sessions.sessions.size + 1}`,
       shell: shell || config.defaultShell,
       args: shellArgs || [],
       cwd: cwd || config.cwd,
+      initialCommand: initialCommand || null,
     });
     res.json({ id, url: `/terminal?id=${id}` });
   });
 
+  // Available shells
+  app.get('/api/shells', auth.middleware, (_req, res) => {
+    const shells = detectShells();
+    res.json({ shells, default: config.defaultShell });
+  });
+
   app.delete('/api/sessions/:id', auth.middleware, (req, res) => {
     if (sessions.delete(req.params.id)) {
       res.json({ ok: true });

package/src/server.js

@@ -76,13 +76,27 @@ server.listen(config.port, config.host, async () => {
     cwd: config.cwd,
   });
 
+  const lp = '\x1b[38;5;141m'; // light purple
+  const rs = '\x1b[0m'; // reset
   console.log('');
-  console.log('  ████████╗███████╗██████╗ ███╗   ███╗██████╗ ███████╗ █████╗ ███╗   ███╗');
-  console.log('  ╚══██╔══╝██╔════╝██╔══██╗████╗ ████║██╔══██╗██╔════╝██╔══██╗████╗ ████║');
-  console.log('     ██║   █████╗  ██████╔╝██╔████╔██║██████╔╝█████╗  ███████║██╔████╔██║');
-  console.log('     ██║   ██╔══╝  ██╔══██╗██║╚██╔╝██║██╔══██╗██╔══╝  ██╔══██║██║╚██╔╝██║');
-  console.log('     ██║   ███████╗██║  ██║██║ ╚═╝ ██║██████╔╝███████╗██║  ██║██║ ╚═╝ ██║');
-  console.log('     ╚═╝   ╚══════╝╚═╝  ╚═╝╚═╝     ╚═╝╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝     ╚═╝');
+  console.log(
+    `${lp}  ████████╗███████╗██████╗ ███╗   ███╗██████╗ ███████╗ █████╗ ███╗   ███╗${rs}`,
+  );
+  console.log(
+    `${lp}  ╚══██╔══╝██╔════╝██╔══██╗████╗ ████║██╔══██╗██╔════╝██╔══██╗████╗ ████║${rs}`,
+  );
+  console.log(
+    `${lp}     ██║   █████╗  ██████╔╝██╔████╔██║██████╔╝█████╗  ███████║██╔████╔██║${rs}`,
+  );
+  console.log(
+    `${lp}     ██║   ██╔══╝  ██╔══██╗██║╚██╔╝██║██╔══██╗██╔══╝  ██╔══██║██║╚██╔╝██║${rs}`,
+  );
+  console.log(
+    `${lp}     ██║   ███████╗██║  ██║██║ ╚═╝ ██║██████╔╝███████╗██║  ██║██║ ╚═╝ ██║${rs}`,
+  );
+  console.log(
+    `${lp}     ╚═╝   ╚══════╝╚═╝  ╚═╝╚═╝     ╚═╝╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝     ╚═╝${rs}`,
+  );
   console.log('');
   console.log(`  Beam your terminal to any device 📡  v${config.version}`);
   console.log('');
@@ -93,7 +107,8 @@ server.listen(config.port, config.host, async () => {
   }
   console.log(`  Shell:    ${config.shell}`);
   console.log(`  Session:  ${defaultId}`);
-  console.log(`  Auth:     ${config.password ? '🔒 password' : '🔓 none'}`);
+  const gn = '\x1b[38;5;114m'; // green
+  console.log(`  Auth:     ${config.password ? `${gn}🔒 password${rs}` : '🔓 none'}`);
 
   let publicUrl = null;
   if (config.useTunnel) {
@@ -117,6 +132,6 @@ server.listen(config.port, config.host, async () => {
   }
 
   console.log(`  Scan the QR code or open: ${qrUrl}`);
-  if (config.password) console.log(`  Password: ${config.password}`);
+  if (config.password) console.log(`  Password: ${gn}${config.password}${rs}`);
   console.log('');
 });

package/src/sessions.js

@@ -6,7 +6,7 @@ class SessionManager {
     this.sessions = new Map();
   }
 
-  create({ name, shell, args = [], cwd }) {
+  create({ name, shell, args = [], cwd, initialCommand = null }) {
     const id = crypto.randomBytes(4).toString('hex');
     const ptyProcess = pty.spawn(shell, args, {
       name: 'xterm-256color',
@@ -16,6 +16,11 @@ class SessionManager {
       env: { ...process.env, TERM: 'xterm-256color' },
     });
 
+    // Send initial command once the shell is ready
+    if (initialCommand) {
+      setTimeout(() => ptyProcess.write(initialCommand + '\r'), 300);
+    }
+
     const session = {
       pty: ptyProcess,
       name,

package/src/shells.js

@@ -0,0 +1,77 @@
+const os = require('os');
+const fs = require('fs');
+const { execFileSync } = require('child_process');
+
+const KNOWN_WINDOWS_SHELLS = [
+  { name: 'PowerShell (Core)', cmd: 'pwsh.exe' },
+  { name: 'Windows PowerShell', cmd: 'powershell.exe' },
+  { name: 'Command Prompt', cmd: 'cmd.exe' },
+  { name: 'Git Bash', cmd: 'bash.exe' },
+  { name: 'WSL', cmd: 'wsl.exe' },
+];
+
+function detectShells() {
+  if (os.platform() === 'win32') {
+    return detectWindowsShells();
+  }
+  return detectUnixShells();
+}
+
+function detectWindowsShells() {
+  const shells = [];
+  for (const { name, cmd } of KNOWN_WINDOWS_SHELLS) {
+    try {
+      const result = execFileSync('where', [cmd], {
+        stdio: ['pipe', 'pipe', 'ignore'],
+        encoding: 'utf8',
+        timeout: 3000,
+      });
+      const fullPath = result.trim().split('\n')[0].trim();
+      if (fullPath) {
+        shells.push({ name, path: fullPath, cmd });
+      }
+    } catch {
+      // not installed
+    }
+  }
+  return shells;
+}
+
+function detectUnixShells() {
+  const shells = [];
+  const seen = new Set();
+
+  // Read /etc/shells
+  try {
+    const content = fs.readFileSync('/etc/shells', 'utf8');
+    for (const line of content.split('\n')) {
+      const trimmed = line.trim();
+      if (trimmed && !trimmed.startsWith('#')) {
+        const name = trimmed.split('/').pop();
+        if (!seen.has(name)) {
+          seen.add(name);
+          shells.push({ name, path: trimmed, cmd: trimmed });
+        }
+      }
+    }
+  } catch {
+    // /etc/shells not available, try common paths
+    const common = ['/bin/bash', '/bin/zsh', '/bin/sh', '/usr/bin/fish', '/bin/fish'];
+    for (const p of common) {
+      try {
+        fs.accessSync(p, fs.constants.X_OK);
+        const name = p.split('/').pop();
+        if (!seen.has(name)) {
+          seen.add(name);
+          shells.push({ name, path: p, cmd: p });
+        }
+      } catch {
+        // not installed
+      }
+    }
+  }
+
+  return shells;
+}
+
+module.exports = { detectShells };

package/src/tunnel.js

@@ -1,26 +1,79 @@
 const { execSync, spawn } = require('child_process');
+const path = require('path');
+const fs = require('fs');
 
 let tunnelId = null;
 let tunnelProc = null;
+let devtunnelCmd = 'devtunnel';
+
+function findDevtunnel() {
+  // Try devtunnel directly
+  try {
+    execSync('devtunnel --version', { stdio: 'pipe' });
+    return 'devtunnel';
+  } catch {}
+
+  // On Windows, check common install locations
+  if (process.platform === 'win32') {
+    const candidates = [
+      path.join(process.env.LOCALAPPDATA || '', 'Microsoft', 'WindowsApps', 'devtunnel.exe'),
+      path.join(process.env.PROGRAMFILES || '', 'Microsoft', 'devtunnel', 'devtunnel.exe'),
+    ];
+    for (const p of candidates) {
+      if (fs.existsSync(p)) {
+        return p;
+      }
+    }
+  }
+
+  return null;
+}
 
 async function startTunnel(port) {
+  // Check if devtunnel CLI is installed
+  const found = findDevtunnel();
+  if (!found) {
+    console.error('[termbeam] ❌ devtunnel CLI is not installed.');
+    console.error('');
+    console.error('  The --tunnel flag requires the Azure Dev Tunnels CLI.');
+    console.error('');
+    console.error('  Install it:');
+    console.error('    Windows:  winget install Microsoft.devtunnel');
+    console.error('             or: Invoke-WebRequest -Uri https://aka.ms/TunnelsCliDownload/win-x64 -OutFile devtunnel.exe');
+    console.error('    macOS:    brew install --cask devtunnel');
+    console.error('    Linux:    curl -sL https://aka.ms/DevTunnelCliInstall | bash');
+    console.error('');
+    console.error('  Then restart your terminal and try again.');
+    console.error('  Docs: https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started');
+    console.error('');
+    return null;
+  }
+  devtunnelCmd = found;
+
   console.log('[termbeam] Starting devtunnel...');
   try {
+    // Ensure user is logged in
+    let loggedIn = false;
     try {
-      execSync('devtunnel user show', { stdio: 'pipe' });
-    } catch {
+      const userOut = execSync(`"${devtunnelCmd}" user show`, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+      // user show can succeed but show "not logged in" status
+      loggedIn = userOut && !userOut.toLowerCase().includes('not logged in');
+    } catch {}
+
+    if (!loggedIn) {
       console.log('[termbeam] devtunnel not logged in, launching login...');
-      execSync('devtunnel user login -g', { stdio: 'inherit' });
+      console.log('[termbeam] A browser window will open for authentication.');
+      execSync(`"${devtunnelCmd}" user login`, { stdio: 'inherit' });
     }
 
-    const createOut = execSync('devtunnel create --expiration 1d --json', { encoding: 'utf-8' });
+    const createOut = execSync(`"${devtunnelCmd}" create --expiration 1d --json`, { encoding: 'utf-8' });
     const tunnelData = JSON.parse(createOut);
     tunnelId = tunnelData.tunnel.tunnelId;
 
-    execSync(`devtunnel port create ${tunnelId} -p ${port} --protocol http`, { stdio: 'pipe' });
-    execSync(`devtunnel access create ${tunnelId} -p ${port} --anonymous`, { stdio: 'pipe' });
+    execSync(`"${devtunnelCmd}" port create ${tunnelId} -p ${port} --protocol http`, { stdio: 'pipe' });
+    execSync(`"${devtunnelCmd}" access create ${tunnelId} -p ${port} --anonymous`, { stdio: 'pipe' });
 
-    const hostProc = spawn('devtunnel', ['host', tunnelId], {
+    const hostProc = spawn(devtunnelCmd, ['host', tunnelId], {
       stdio: ['pipe', 'pipe', 'pipe'],
       detached: true,
     });
@@ -56,7 +109,7 @@ function cleanupTunnel() {
   if (tunnelId) {
     try {
       if (tunnelProc) tunnelProc.kill();
-      execSync(`devtunnel delete ${tunnelId} -f`, { stdio: 'pipe' });
+      execSync(`"${devtunnelCmd}" delete ${tunnelId} -f`, { stdio: 'pipe' });
       console.log('[termbeam] Tunnel cleaned up');
     } catch {
       /* best effort */