@seflless/ghosttown 1.4.1 → 1.6.0

package/src/cli.js

@@ -8,21 +8,39 @@
  *   ghosttown [options] [command]
  *
  * Options:
- *   -p, --port <port>  Port to listen on (default: 8080, or PORT env var)
- *   -h, --help         Show this help message
+ *   -p, --port <port>    Port to listen on (default: 8080, or PORT env var)
+ *   -n, --name <name>    Give the session a custom name
+ *   -k, --kill [session] Kill a session (current if inside one, or specify by name)
+ *   -ka, --kill-all      Kill all ghosttown sessions
+ *   -v, --version        Show version number
+ *   -h, --help           Show this help message
+ *
+ * Commands:
+ *   list                 List all ghosttown tmux sessions
+ *   attach <name|id>     Attach to a ghosttown session
+ *   detach               Detach from current session
+ *   rename [old] <new>   Rename a session
+ *   update               Update ghosttown to the latest version
  *
  * Examples:
  *   ghosttown                    Start the web terminal server
  *   ghosttown -p 3000            Start the server on port 3000
  *   ghosttown vim                Run vim in a new tmux session
- *   ghosttown "npm run dev"      Run npm in a new tmux session
+ *   ghosttown -n my-project vim  Run vim in a named session
+ *   ghosttown list               List all sessions
+ *   ghosttown attach my-project  Attach to a session
+ *   ghosttown rename new-name    Rename current session
+ *   ghosttown -k my-project      Kill a specific session
+ *   ghosttown -ka                Kill all sessions
  */
 
 import { execSync, spawn, spawnSync } from 'child_process';
+import crypto from 'crypto';
 import fs from 'fs';
 import http from 'http';
+import https from 'https';
 import { createRequire } from 'module';
-import { homedir, networkInterfaces } from 'os';
+import { homedir, networkInterfaces, userInfo } from 'os';
 import path from 'path';
 import { fileURLToPath } from 'url';
 
@@ -41,6 +59,240 @@ const require = createRequire(import.meta.url);
 const packageJson = require('../package.json');
 const VERSION = packageJson.version;
 
+// Special session name for background server (hidden from `gt list`)
+const SERVER_SESSION_NAME = 'ghosttown-host';
+
+// ============================================================================
+// Authentication & Session Management
+// ============================================================================
+
+// Session expiration: 3 days in milliseconds
+const SESSION_EXPIRATION_MS = 3 * 24 * 60 * 60 * 1000;
+
+// In-memory session store: Map<token, { username, createdAt, lastActivity }>
+const authSessions = new Map();
+
+// Rate limiting for login attempts
+// Map<ip, { attempts: number, firstAttempt: number, lockedUntil: number }>
+const loginAttempts = new Map();
+const RATE_LIMIT_WINDOW_MS = 15 * 60 * 1000; // 15 minutes
+const RATE_LIMIT_MAX_ATTEMPTS = 5; // Max attempts per window
+const RATE_LIMIT_LOCKOUT_MS = 15 * 60 * 1000; // 15 minute lockout after max attempts
+
+function getClientIP(req) {
+  // Support reverse proxies
+  const forwarded = req.headers['x-forwarded-for'];
+  if (forwarded) {
+    return forwarded.split(',')[0].trim();
+  }
+  return req.socket?.remoteAddress || 'unknown';
+}
+
+function checkRateLimit(ip) {
+  const now = Date.now();
+  const record = loginAttempts.get(ip);
+
+  if (!record) {
+    return { allowed: true };
+  }
+
+  // Check if currently locked out
+  if (record.lockedUntil && now < record.lockedUntil) {
+    const remainingSeconds = Math.ceil((record.lockedUntil - now) / 1000);
+    return {
+      allowed: false,
+      error: `Too many login attempts. Try again in ${remainingSeconds} seconds.`,
+    };
+  }
+
+  // Check if window has expired, reset if so
+  if (now - record.firstAttempt > RATE_LIMIT_WINDOW_MS) {
+    loginAttempts.delete(ip);
+    return { allowed: true };
+  }
+
+  // Check if max attempts exceeded
+  if (record.attempts >= RATE_LIMIT_MAX_ATTEMPTS) {
+    record.lockedUntil = now + RATE_LIMIT_LOCKOUT_MS;
+    const remainingSeconds = Math.ceil(RATE_LIMIT_LOCKOUT_MS / 1000);
+    return {
+      allowed: false,
+      error: `Too many login attempts. Try again in ${remainingSeconds} seconds.`,
+    };
+  }
+
+  return { allowed: true };
+}
+
+function recordLoginAttempt(ip, success) {
+  const now = Date.now();
+
+  if (success) {
+    // Clear attempts on successful login
+    loginAttempts.delete(ip);
+    return;
+  }
+
+  const record = loginAttempts.get(ip);
+  if (!record || now - record.firstAttempt > RATE_LIMIT_WINDOW_MS) {
+    loginAttempts.set(ip, { attempts: 1, firstAttempt: now, lockedUntil: 0 });
+  } else {
+    record.attempts++;
+  }
+}
+
+// Clean up old rate limit records periodically
+setInterval(
+  () => {
+    const now = Date.now();
+    for (const [ip, record] of loginAttempts.entries()) {
+      if (
+        now - record.firstAttempt > RATE_LIMIT_WINDOW_MS &&
+        (!record.lockedUntil || now > record.lockedUntil)
+      ) {
+        loginAttempts.delete(ip);
+      }
+    }
+  },
+  5 * 60 * 1000
+); // Clean up every 5 minutes
+
+// Generate a secure random token
+function generateAuthToken() {
+  return crypto.randomBytes(32).toString('hex');
+}
+
+// Parse cookies from request headers
+function parseCookies(cookieHeader) {
+  const cookies = {};
+  if (!cookieHeader) return cookies;
+  for (const cookie of cookieHeader.split(';')) {
+    const [name, ...rest] = cookie.split('=');
+    if (name && rest.length > 0) {
+      cookies[name.trim()] = rest.join('=').trim();
+    }
+  }
+  return cookies;
+}
+
+// Validate session token
+function validateAuthSession(token) {
+  if (!token) return null;
+  const session = authSessions.get(token);
+  if (!session) return null;
+
+  // Check if session has expired
+  const now = Date.now();
+  if (now - session.createdAt > SESSION_EXPIRATION_MS) {
+    authSessions.delete(token);
+    return null;
+  }
+
+  // Update last activity
+  session.lastActivity = now;
+  return session;
+}
+
+// Authenticate user against macOS local directory
+async function authenticateUser(username, password) {
+  if (process.platform !== 'darwin') {
+    // On non-macOS, just check if the username matches the current user
+    const currentUser = userInfo().username;
+    if (username === currentUser) {
+      return { success: true, username };
+    }
+    return { success: false, error: 'Authentication only supported on macOS' };
+  }
+
+  return new Promise((resolve) => {
+    // Use dscl to verify credentials against macOS local directory
+    const dscl = spawn('dscl', ['/Local/Default', '-authonly', username, password], {
+      stdio: ['pipe', 'pipe', 'pipe'],
+    });
+
+    dscl.on('close', (code) => {
+      if (code === 0) {
+        resolve({ success: true, username });
+      } else {
+        resolve({ success: false, error: 'Invalid username or password' });
+      }
+    });
+
+    dscl.on('error', (err) => {
+      resolve({ success: false, error: 'Authentication failed: ' + err.message });
+    });
+  });
+}
+
+// Clean up expired sessions periodically
+setInterval(
+  () => {
+    const now = Date.now();
+    for (const [token, session] of authSessions.entries()) {
+      if (now - session.createdAt > SESSION_EXPIRATION_MS) {
+        authSessions.delete(token);
+      }
+    }
+  },
+  60 * 60 * 1000
+); // Clean up every hour
+
+// Helper to read POST body
+function readBody(req) {
+  return new Promise((resolve, reject) => {
+    let body = '';
+    req.on('data', (chunk) => {
+      body += chunk.toString();
+      if (body.length > 1024 * 10) {
+        reject(new Error('Body too large'));
+      }
+    });
+    req.on('end', () => resolve(body));
+    req.on('error', reject);
+  });
+}
+
+// Helper to set auth cookie
+function setAuthCookie(res, token) {
+  const maxAge = SESSION_EXPIRATION_MS / 1000;
+  res.setHeader(
+    'Set-Cookie',
+    `ghostty_session=${token}; HttpOnly; SameSite=Strict; Path=/; Max-Age=${maxAge}`
+  );
+}
+
+// Helper to clear auth cookie
+function clearAuthCookie(res) {
+  res.setHeader('Set-Cookie', 'ghostty_session=; HttpOnly; SameSite=Strict; Path=/; Max-Age=0');
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+/**
+ * Get the user's default shell
+ */
+function getShell() {
+  return process.env.SHELL || '/bin/sh';
+}
+
+/**
+ * Get local IP addresses for network access
+ */
+function getLocalIPs() {
+  const interfaces = networkInterfaces();
+  const ips = [];
+  for (const name of Object.keys(interfaces)) {
+    for (const iface of interfaces[name] || []) {
+      if (iface.family === 'IPv4' && !iface.internal) {
+        ips.push(iface.address);
+      }
+    }
+  }
+  return ips;
+}
+
 // ============================================================================
 // Tmux Session Management
 // ============================================================================
@@ -100,42 +352,198 @@ function getCurrentTmuxSessionName() {
 }
 
 /**
- * Check if currently inside a ghosttown session (named ghosttown-<N>)
+ * Check if currently inside a ghosttown session (named gt-<N>)
  */
 function isInsideGhosttownSession() {
   const sessionName = getCurrentTmuxSessionName();
-  return sessionName && sessionName.startsWith('ghosttown-');
+  return sessionName && sessionName.startsWith('gt-');
+}
+
+/**
+ * Validate a session name
+ * Returns { valid: true } or { valid: false, error: string }
+ */
+function validateSessionName(name) {
+  if (!name || name.length === 0) {
+    return { valid: false, error: 'Session name cannot be empty' };
+  }
+  if (name.length > 50) {
+    return { valid: false, error: 'Session name too long (max 50 chars)' };
+  }
+  if (/^[0-9]+$/.test(name)) {
+    return {
+      valid: false,
+      error: 'Session name cannot be purely numeric (conflicts with auto-generated IDs)',
+    };
+  }
+  // Reserved name for background server
+  if (name === 'ghosttown-host') {
+    return { valid: false, error: "'ghosttown-host' is a reserved name" };
+  }
+  // tmux session names cannot contain: colon, period
+  // We also disallow spaces and special chars for URL safety
+  if (!/^[a-zA-Z0-9_-]+$/.test(name)) {
+    return {
+      valid: false,
+      error: 'Session name can only contain letters, numbers, hyphens, and underscores',
+    };
+  }
+  return { valid: true };
+}
+
+/**
+ * Check if a tmux session with the given name exists
+ */
+function sessionExists(sessionName) {
+  try {
+    const output = execSync('tmux list-sessions -F "#{session_name}"', {
+      encoding: 'utf8',
+      stdio: ['pipe', 'pipe', 'pipe'],
+    });
+    return output
+      .split('\n')
+      .filter((s) => s.trim())
+      .includes(sessionName);
+  } catch (err) {
+    return false;
+  }
+}
+
+/**
+ * Check if a display name is already used by a ghosttown session
+ * Display name is the user-facing part after gt-<id>-
+ */
+function displayNameExists(displayName) {
+  try {
+    const output = execSync('tmux list-sessions -F "#{session_name}"', {
+      encoding: 'utf8',
+      stdio: ['pipe', 'pipe', 'pipe'],
+    });
+    return output
+      .split('\n')
+      .filter((s) => s.trim())
+      .some((name) => {
+        const parsed = parseSessionName(name);
+        return parsed && parsed.displayName === displayName;
+      });
+  } catch (err) {
+    return false;
+  }
+}
+
+/**
+ * Parse a ghosttown session name into its components
+ * Format: gt-<stable-id>-<display-name>
+ * Returns { stableId, displayName, fullName } or null if not a valid gt session
+ */
+function parseSessionName(fullName) {
+  if (!fullName || !fullName.startsWith('gt-')) {
+    return null;
+  }
+  // Format: gt-<stable-id>-<display-name>
+  const match = fullName.match(/^gt-(\d+)-(.+)$/);
+  if (match) {
+    return {
+      stableId: match[1],
+      displayName: match[2],
+      fullName: fullName,
+    };
+  }
+  // Legacy format: gt-<name> (no stable ID)
+  // Treat the whole thing after gt- as the display name, no stable ID
+  const legacyName = fullName.slice(3);
+  return {
+    stableId: null,
+    displayName: legacyName,
+    fullName: fullName,
+  };
 }
 
 /**
- * Get the next available ghosttown session ID
- * Scans existing tmux sessions named ghosttown-<N> and returns max(N) + 1
+ * Find a ghosttown session by its stable ID
+ * Returns the full session name or null if not found
  */
-function getNextSessionId() {
+function findSessionByStableId(stableId) {
+  try {
+    const output = execSync('tmux list-sessions -F "#{session_name}"', {
+      encoding: 'utf8',
+      stdio: ['pipe', 'pipe', 'pipe'],
+    });
+    const sessions = output.split('\n').filter((s) => s.trim() && s.startsWith('gt-'));
+    for (const name of sessions) {
+      const parsed = parseSessionName(name);
+      if (parsed && parsed.stableId === stableId) {
+        return name;
+      }
+    }
+    return null;
+  } catch (err) {
+    return null;
+  }
+}
+
+/**
+ * Get the next available auto-generated display name number
+ * Scans existing ghosttown sessions and finds the next available numeric display name
+ */
+function getNextDisplayNumber() {
   try {
-    // List all tmux sessions
     const output = execSync('tmux list-sessions -F "#{session_name}"', {
       encoding: 'utf8',
       stdio: ['pipe', 'pipe', 'pipe'],
     });
 
-    // Find all ghosttown-<N> sessions and extract IDs
-    const sessionIds = output
+    // Find all numeric display names from gt sessions
+    const displayNumbers = output
       .split('\n')
-      .filter((name) => name.startsWith('ghosttown-'))
+      .filter((name) => name.startsWith('gt-'))
       .map((name) => {
-        const id = Number.parseInt(name.replace('ghosttown-', ''), 10);
-        return Number.isNaN(id) ? 0 : id;
+        const parsed = parseSessionName(name);
+        if (parsed && /^\d+$/.test(parsed.displayName)) {
+          return Number.parseInt(parsed.displayName, 10);
+        }
+        return 0;
       });
 
-    // Return max + 1, or 1 if no sessions exist
-    return sessionIds.length > 0 ? Math.max(...sessionIds) + 1 : 1;
+    return displayNumbers.length > 0 ? Math.max(...displayNumbers) + 1 : 1;
   } catch (err) {
-    // tmux not running or no sessions - start with 1
     return 1;
   }
 }
 
+/**
+ * Check if the background server is running and get its port
+ * @returns {{ running: boolean, port: number | null }}
+ */
+function getServerStatus() {
+  try {
+    const output = execSync('tmux list-sessions -F "#{session_name}"', {
+      encoding: 'utf8',
+      stdio: ['pipe', 'pipe', 'pipe'],
+    });
+
+    const isRunning = output.split('\n').includes(SERVER_SESSION_NAME);
+
+    if (!isRunning) {
+      return { running: false, port: null };
+    }
+
+    // Get the port from tmux environment
+    try {
+      const envOutput = execSync(`tmux show-environment -t ${SERVER_SESSION_NAME} GHOSTTOWN_PORT`, {
+        encoding: 'utf8',
+        stdio: ['pipe', 'pipe', 'pipe'],
+      });
+      const port = Number.parseInt(envOutput.split('=')[1], 10);
+      return { running: true, port: Number.isNaN(port) ? 8080 : port };
+    } catch (e) {
+      return { running: true, port: 8080 }; // Default port
+    }
+  } catch (err) {
+    return { running: false, port: null };
+  }
+}
+
 /**
  * List all ghosttown tmux sessions
  */
@@ -150,9 +558,9 @@ function listSessions() {
   const BEIGE = '\x1b[38;2;255;220;150m';
 
   try {
-    // Get detailed session information
+    // Get detailed session information including last activity time
     const output = execSync(
-      'tmux list-sessions -F "#{session_name}|#{session_created}|#{session_attached}|#{session_windows}"',
+      'tmux list-sessions -F "#{session_name}|#{session_activity}|#{session_attached}|#{session_windows}"',
       {
         encoding: 'utf8',
         stdio: ['pipe', 'pipe', 'pipe'],
@@ -161,12 +569,15 @@ function listSessions() {
 
     const sessions = output
       .split('\n')
-      .filter((line) => line.startsWith('ghosttown-'))
+      .filter((line) => line.startsWith('gt-'))
       .map((line) => {
-        const [name, created, attached, windows] = line.split('|');
+        const [fullName, activity, attached, windows] = line.split('|');
+        const parsed = parseSessionName(fullName);
         return {
-          name,
-          created: new Date(Number.parseInt(created, 10) * 1000),
+          displayName: parsed ? parsed.displayName : fullName.replace('gt-', ''),
+          stableId: parsed ? parsed.stableId : null,
+          fullName,
+          activity: new Date(Number.parseInt(activity, 10) * 1000),
           attached: attached === '1',
           windows: Number.parseInt(windows, 10),
         };
@@ -179,21 +590,24 @@ function listSessions() {
       process.exit(0);
     }
 
+    // Sort by last activity (most recent first)
+    sessions.sort((a, b) => b.activity.getTime() - a.activity.getTime());
+
     // Print header
     console.log('\n\x1b[1mGhosttown Sessions\x1b[0m\n');
     console.log(
-      `${CYAN}${'Name'.padEnd(15)}  ${'Created'.padEnd(22)}  ${'Status'.padEnd(10)}  Windows${RESET}`
+      `${CYAN}${'Name'.padEnd(20)}  ${'Last Activity'.padEnd(22)}  ${'Status'.padEnd(10)}  Windows${RESET}`
     );
 
     // Print sessions
     for (const session of sessions) {
-      const createdStr = session.created.toLocaleString();
+      const activityStr = session.activity.toLocaleString();
       // Status has ANSI codes so we need to pad the visible text differently
       const statusPadded = session.attached
         ? `\x1b[32m${'attached'.padEnd(10)}${RESET}`
         : `\x1b[33m${'detached'.padEnd(10)}${RESET}`;
       console.log(
-        `${session.name.padEnd(15)}  ${createdStr.padEnd(22)}  ${statusPadded}  ${session.windows}`
+        `${session.displayName.padEnd(20)}  ${activityStr.padEnd(22)}  ${statusPadded}  ${session.windows}`
       );
     }
 
@@ -213,39 +627,69 @@ function listSessions() {
 
 /**
  * Create a new tmux session and run the command
+ * @param {string} command - The command to run in the session
+ * @param {string|null} customName - Optional custom name for the session (without gt- prefix)
  */
-function createTmuxSession(command) {
+function createTmuxSession(command, customName = null) {
   // Check if tmux is installed
   if (!checkTmuxInstalled()) {
     printTmuxInstallHelp();
   }
 
-  const sessionId = getNextSessionId();
-  const sessionName = `ghosttown-${sessionId}`;
+  const RESET = '\x1b[0m';
+  const RED = '\x1b[31m';
+
+  // Determine display name
+  let displayName;
+  if (customName) {
+    const validation = validateSessionName(customName);
+    if (!validation.valid) {
+      console.log('');
+      console.log(`   ${RED}Error:${RESET} ${validation.error}`);
+      console.log('');
+      process.exit(1);
+    }
+    // Check if display name already exists
+    if (displayNameExists(customName)) {
+      console.log('');
+      console.log(`   ${RED}Error:${RESET} Session '${customName}' already exists.`);
+      console.log('');
+      process.exit(1);
+    }
+    displayName = customName;
+  } else {
+    displayName = String(getNextDisplayNumber());
+  }
 
   try {
-    // Create tmux session and attach directly (not detached)
-    // Use -x and -y to set initial size, avoiding "terminal too small" issues
-    // The command runs in the session, and we attach immediately
-    const attach = spawn(
-      'tmux',
-      [
-        'new-session',
-        '-s',
-        sessionName,
-        '-x',
-        '200',
-        '-y',
-        '50',
-        // Set status off (no HUD), run the command, then start a shell
-        // so the session stays open and interactive after command completes
-        'tmux set-option status off; ' + command + '; exec $SHELL',
-      ],
-      {
-        stdio: 'inherit',
-      }
+    // Create a detached session with a temporary name to get its stable ID
+    const tempName = `gt-temp-${Date.now()}`;
+    const output = execSync(
+      `tmux new-session -d -s ${tempName} -x 200 -y 50 -P -F "#{session_id}"`,
+      { encoding: 'utf8', stdio: ['pipe', 'pipe', 'pipe'] }
+    );
+
+    // Extract the stable ID (e.g., "$10" -> "10")
+    const stableId = output.trim().replace('$', '');
+
+    // Rename to final name: gt-<stableId>-<displayName>
+    const sessionName = `gt-${stableId}-${displayName}`;
+    execSync(`tmux rename-session -t ${tempName} ${sessionName}`, { stdio: 'pipe' });
+
+    // Set status off
+    execSync(`tmux set-option -t ${sessionName} status off`, { stdio: 'pipe' });
+
+    // Send the command to run, followed by shell
+    execSync(
+      `tmux send-keys -t ${sessionName} '${command.replace(/'/g, "'\\''")}; exec $SHELL' Enter`,
+      { stdio: 'pipe' }
     );
 
+    // Now attach to the session
+    const attach = spawn('tmux', ['attach-session', '-t', sessionName], {
+      stdio: 'inherit',
+    });
+
     attach.on('exit', (code) => {
       process.exit(code || 0);
     });
@@ -268,14 +712,18 @@ function printDetachMessage(sessionName) {
   const formatHint = (label, command) =>
     `   ${CYAN}${label.padStart(labelWidth)}${RESET} ${BEIGE}${command}${RESET}`;
 
+  // Extract display name from session name
+  const parsed = parseSessionName(sessionName);
+  const displayName = parsed ? parsed.displayName : sessionName.replace('gt-', '');
+
   return [
     '',
     `   ${BOLD_YELLOW}You've detached from your ghosttown session.${RESET}`,
     `   ${DIM}It's now running in the background.${RESET}`,
     '',
-    formatHint('To reattach:', `ghosttown attach ${sessionName}`),
+    formatHint('To reattach:', `gt attach ${displayName}`),
     '',
-    formatHint('To list all sessions:', 'ghosttown list'),
+    formatHint('To list all sessions:', 'gt list'),
     '',
     '',
   ].join('\n');
@@ -369,9 +817,9 @@ function attachToSession(sessionName) {
   const RED = '\x1b[31m';
   const BEIGE = '\x1b[38;2;255;220;150m';
 
-  // Add ghosttown- prefix if not present
-  if (!sessionName.startsWith('ghosttown-')) {
-    sessionName = `ghosttown-${sessionName}`;
+  // Add gt- prefix if not present
+  if (!sessionName.startsWith('gt-')) {
+    sessionName = `gt-${sessionName}`;
   }
 
   // Check if session exists
@@ -521,9 +969,9 @@ function killSession(sessionName) {
     sessionName = getCurrentTmuxSessionName();
   }
 
-  // Add ghosttown- prefix if not present
-  if (!sessionName.startsWith('ghosttown-')) {
-    sessionName = `ghosttown-${sessionName}`;
+  // Add gt- prefix if not present
+  if (!sessionName.startsWith('gt-')) {
+    sessionName = `gt-${sessionName}`;
   }
 
   // Check if session exists
@@ -557,10 +1005,14 @@ function killSession(sessionName) {
       stdio: 'pipe',
     });
 
+    // Extract display name from session name
+    const parsed = parseSessionName(sessionName);
+    const displayName = parsed ? parsed.displayName : sessionName.replace('gt-', '');
+
     console.log('');
-    console.log(`   ${BOLD_YELLOW}Session '${sessionName}' has been killed.${RESET}`);
+    console.log(`   ${BOLD_YELLOW}Session ${displayName} has been killed.${RESET}`);
     console.log('');
-    console.log(`   ${CYAN}To list remaining:${RESET}  ${BEIGE}ghosttown list${RESET}`);
+    console.log(`   ${CYAN}To list remaining:${RESET}  ${BEIGE}gt list${RESET}`);
     console.log('');
     process.exit(0);
   } catch (err) {
@@ -571,70 +1023,498 @@ function killSession(sessionName) {
   }
 }
 
-// ============================================================================
-// Parse CLI arguments
-// ============================================================================
-
-function parseArgs(argv) {
-  const args = argv.slice(2);
-  let port = null;
-  let command = null;
-  let handled = false;
-
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-
-    if (arg === '-h' || arg === '--help') {
-      console.log(`
-Usage: ghosttown [options] [command]
+/**
+ * Kill all ghosttown sessions
+ */
+function killAllSessions() {
+  // Check if tmux is installed
+  if (!checkTmuxInstalled()) {
+    printTmuxInstallHelp();
+  }
 
-Options:
-  -p, --port <port>    Port to listen on (default: 8080, or PORT env var)
-  -k, --kill [session] Kill a session (current if inside one, or specify)
-  -v, --version        Show version number
-  -h, --help           Show this help message
+  const RESET = '\x1b[0m';
+  const RED = '\x1b[31m';
+  const BEIGE = '\x1b[38;2;255;220;150m';
+  const BOLD_YELLOW = '\x1b[1;93m';
 
-Commands:
-  list               List all ghosttown tmux sessions
-  attach <session>   Attach to a ghosttown session
-  detach             Detach from current ghosttown session
-  update             Update ghosttown to the latest version
-  <command>          Run command in a new tmux session (ghosttown-<id>)
+  try {
+    const output = execSync('tmux list-sessions -F "#{session_name}"', {
+      encoding: 'utf8',
+      stdio: ['pipe', 'pipe', 'pipe'],
+    });
 
-Examples:
-  ghosttown                    Start the web terminal server
-  ghosttown -p 3000            Start the server on port 3000
-  ghosttown list               List all ghosttown sessions
-  ghosttown attach ghosttown-1 Attach to session ghosttown-1
-  ghosttown detach             Detach from current session
-  ghosttown update             Update to the latest version
-  ghosttown -k                 Kill current session (when inside one)
-  ghosttown -k ghosttown-1     Kill a specific session
-  ghosttown vim                Run vim in a new tmux session
-  ghosttown "npm run dev"      Run npm in a new tmux session
+    const sessions = output.split('\n').filter((s) => s.trim() && s.startsWith('gt-'));
 
-Aliases:
-  This CLI can also be invoked as 'gt' or 'ght'.
-`);
-      handled = true;
-      break;
+    if (sessions.length === 0) {
+      console.log('');
+      console.log(`   ${BEIGE}No ghosttown sessions are currently running.${RESET}`);
+      console.log('');
+      process.exit(0);
     }
 
-    // Handle version flag
-    if (arg === '-v' || arg === '--version') {
-      console.log(VERSION);
-      handled = true;
-      break;
+    // Kill each session
+    let killed = 0;
+    for (const sessionName of sessions) {
+      try {
+        execSync(`tmux kill-session -t "${sessionName}"`, { stdio: 'pipe' });
+        killed++;
+      } catch (err) {
+        // Session may have been killed by another process, continue
+      }
     }
 
-    // Handle list command
-    if (arg === 'list') {
-      handled = true;
-      listSessions();
-      // listSessions exits, so this won't be reached
+    console.log('');
+    if (killed === 1) {
+      console.log(`   ${BOLD_YELLOW}Killed 1 session.${RESET}`);
+    } else {
+      console.log(`   ${BOLD_YELLOW}Killed ${killed} sessions.${RESET}`);
     }
-
-    // Handle detach command
+    console.log('');
+    process.exit(0);
+  } catch (err) {
+    // No tmux sessions
+    console.log('');
+    console.log(`   ${BEIGE}No ghosttown sessions are currently running.${RESET}`);
+    console.log('');
+    process.exit(0);
+  }
+}
+
+/**
+ * Start the server in the background using a tmux session
+ * @param {number} port - Port to listen on
+ */
+function startServerInBackground(port = 8080) {
+  // Check if tmux is installed
+  if (!checkTmuxInstalled()) {
+    printTmuxInstallHelp();
+  }
+
+  const RESET = '\x1b[0m';
+  const RED = '\x1b[31m';
+  const BOLD_YELLOW = '\x1b[1;93m';
+  const CYAN = '\x1b[36m';
+  const BEIGE = '\x1b[38;2;255;220;150m';
+
+  // Check if server is already running
+  const status = getServerStatus();
+  if (status.running) {
+    console.log('');
+    console.log(`   ${RED}Error:${RESET} A server is already running (port ${status.port}).`);
+    console.log('');
+    if (status.port !== port) {
+      console.log(`   To switch to port ${port}:`);
+      console.log(`     ${BEIGE}gt stop && gt start -p ${port}${RESET}`);
+    } else {
+      console.log(`   ${CYAN}To stop:${RESET}  ${BEIGE}gt stop${RESET}`);
+      console.log(`   ${CYAN}To check:${RESET} ${BEIGE}gt status${RESET}`);
+    }
+    console.log('');
+    process.exit(1);
+  }
+
+  // Check if port is already in use by another process
+  try {
+    execSync(`lsof -i:${port}`, { stdio: 'pipe' });
+    // If lsof succeeds, port is in use
+    console.log('');
+    console.log(`   ${RED}Error:${RESET} Port ${port} is already in use.`);
+    console.log('');
+    console.log(`   Try a different port: ${BEIGE}gt start -p <port>${RESET}`);
+    console.log('');
+    process.exit(1);
+  } catch (e) {
+    // lsof returns non-zero if port is free - this is what we want
+  }
+
+  try {
+    // Get the path to the gt executable
+    const gtPath = process.argv[1];
+
+    // Create a detached tmux session for the server
+    execSync(`tmux new-session -d -s ${SERVER_SESSION_NAME} -x 200 -y 50`, {
+      stdio: 'pipe',
+    });
+
+    // Set the port environment variable in the tmux session
+    execSync(`tmux set-environment -t ${SERVER_SESSION_NAME} GHOSTTOWN_PORT ${port}`, {
+      stdio: 'pipe',
+    });
+
+    // Disable status bar for cleaner look
+    execSync(`tmux set-option -t ${SERVER_SESSION_NAME} status off`, { stdio: 'pipe' });
+
+    // Run the server with background mode flag
+    execSync(
+      `tmux send-keys -t ${SERVER_SESSION_NAME} 'node "${gtPath}" --server-background -p ${port}' Enter`,
+      { stdio: 'pipe' }
+    );
+
+    // Get local IPs for display
+    const localIPs = getLocalIPs();
+
+    console.log('');
+    console.log(`   ${BOLD_YELLOW}Ghosttown server started!${RESET}`);
+    console.log('');
+    console.log(`     ${CYAN}Open:${RESET} ${BEIGE}http://localhost:${port}${RESET}`);
+    if (localIPs.length > 0) {
+      console.log(`  ${CYAN}Network:${RESET} ${BEIGE}http://${localIPs[0]}:${port}${RESET}`);
+    }
+    console.log('');
+    console.log(`   ${CYAN}To stop:${RESET}  ${BEIGE}gt stop${RESET}`);
+    console.log(`   ${CYAN}To check:${RESET} ${BEIGE}gt status${RESET}`);
+    console.log('');
+  } catch (err) {
+    console.log('');
+    console.log(`   ${RED}Error:${RESET} Failed to start server.`);
+    console.log(`   ${err.message}`);
+    console.log('');
+    process.exit(1);
+  }
+
+  process.exit(0);
+}
+
+/**
+ * Stop the background server
+ */
+function stopServer() {
+  // Check if tmux is installed
+  if (!checkTmuxInstalled()) {
+    printTmuxInstallHelp();
+  }
+
+  const RESET = '\x1b[0m';
+  const RED = '\x1b[31m';
+  const BOLD_YELLOW = '\x1b[1;93m';
+  const BEIGE = '\x1b[38;2;255;220;150m';
+
+  const status = getServerStatus();
+
+  if (!status.running) {
+    console.log('');
+    console.log(`   ${BEIGE}No server is currently running.${RESET}`);
+    console.log('');
+    console.log('   To start: gt start');
+    console.log('');
+    process.exit(0);
+  }
+
+  try {
+    execSync(`tmux kill-session -t ${SERVER_SESSION_NAME}`, { stdio: 'pipe' });
+
+    console.log('');
+    console.log(`   ${BOLD_YELLOW}Server stopped.${RESET}`);
+    console.log('');
+  } catch (err) {
+    console.log('');
+    console.log(`   ${RED}Error:${RESET} Failed to stop server.`);
+    console.log('');
+    process.exit(1);
+  }
+
+  process.exit(0);
+}
+
+/**
+ * Show server status
+ */
+function showServerStatus() {
+  // Check if tmux is installed
+  if (!checkTmuxInstalled()) {
+    printTmuxInstallHelp();
+  }
+
+  const RESET = '\x1b[0m';
+  const CYAN = '\x1b[36m';
+  const BEIGE = '\x1b[38;2;255;220;150m';
+  const GREEN = '\x1b[32m';
+  const DIM = '\x1b[2m';
+
+  const status = getServerStatus();
+
+  console.log('');
+
+  if (status.running) {
+    const localIPs = getLocalIPs();
+    const port = status.port || 8080;
+
+    console.log(`   ${GREEN}Server is running${RESET}`);
+    console.log('');
+    console.log(`     ${CYAN}Open:${RESET} ${BEIGE}http://localhost:${port}${RESET}`);
+    if (localIPs.length > 0) {
+      console.log(`  ${CYAN}Network:${RESET} ${BEIGE}http://${localIPs[0]}:${port}${RESET}`);
+    }
+    console.log('');
+    console.log(`   ${DIM}To stop: gt stop${RESET}`);
+  } else {
+    console.log(`   ${DIM}Server is not running.${RESET}`);
+    console.log('');
+    console.log('   To start: gt start');
+  }
+
+  console.log('');
+  process.exit(0);
+}
+
+/**
+ * Print sessions without exiting (for use in error messages)
+ */
+function listSessionsInline() {
+  const RESET = '\x1b[0m';
+  const CYAN = '\x1b[36m';
+
+  try {
+    const output = execSync(
+      'tmux list-sessions -F "#{session_name}|#{session_activity}|#{session_attached}|#{session_windows}"',
+      {
+        encoding: 'utf8',
+        stdio: ['pipe', 'pipe', 'pipe'],
+      }
+    );
+
+    const sessions = output
+      .split('\n')
+      .filter((line) => line.startsWith('gt-'))
+      .map((line) => {
+        const [fullName, activity, attached, windows] = line.split('|');
+        const parsed = parseSessionName(fullName);
+        return {
+          displayName: parsed ? parsed.displayName : fullName.replace('gt-', ''),
+          fullName,
+          activity: new Date(Number.parseInt(activity, 10) * 1000),
+          attached: attached === '1',
+          windows: Number.parseInt(windows, 10),
+        };
+      });
+
+    if (sessions.length === 0) {
+      console.log('   No ghosttown sessions are currently running.');
+      return;
+    }
+
+    // Sort by last activity (most recent first)
+    sessions.sort((a, b) => b.activity.getTime() - a.activity.getTime());
+
+    console.log(`   ${CYAN}Available sessions:${RESET}`);
+    for (const session of sessions) {
+      const status = session.attached ? 'attached' : 'detached';
+      console.log(`     ${session.displayName} (${status})`);
+    }
+  } catch (err) {
+    console.log('   No ghosttown sessions are currently running.');
+  }
+}
+
+/**
+ * Find a ghosttown session by display name
+ * Returns the parsed session info or null if not found
+ */
+function findSessionByDisplayName(displayName) {
+  try {
+    const output = execSync('tmux list-sessions -F "#{session_name}"', {
+      encoding: 'utf8',
+      stdio: ['pipe', 'pipe', 'pipe'],
+    });
+    const sessions = output.split('\n').filter((s) => s.trim() && s.startsWith('gt-'));
+    for (const fullName of sessions) {
+      const parsed = parseSessionName(fullName);
+      if (parsed && parsed.displayName === displayName) {
+        return parsed;
+      }
+    }
+    return null;
+  } catch (err) {
+    return null;
+  }
+}
+
+/**
+ * Rename a ghosttown session
+ * Usage:
+ *   gt rename <existing> <new-name>  - rename from outside session
+ *   gt rename <new-name>             - rename current session (inside a gt session)
+ */
+function renameSession(renameArgs) {
+  // Check if tmux is installed
+  if (!checkTmuxInstalled()) {
+    printTmuxInstallHelp();
+  }
+
+  const RESET = '\x1b[0m';
+  const RED = '\x1b[31m';
+  const BOLD_YELLOW = '\x1b[1;93m';
+
+  let oldFullName, oldDisplayName, stableId, newDisplayName;
+
+  if (renameArgs.length === 1) {
+    // Inside session: gt rename <new-name>
+    if (!isInsideGhosttownSession()) {
+      console.log('');
+      console.log(`   ${RED}Error:${RESET} Not inside a ghosttown session.`);
+      console.log('');
+      console.log('   Usage: gt rename <existing-session> <new-name>');
+      console.log('          gt rename <new-name>  (when inside a session)');
+      console.log('');
+      listSessionsInline();
+      console.log('');
+      process.exit(1);
+    }
+    oldFullName = getCurrentTmuxSessionName();
+    const parsed = parseSessionName(oldFullName);
+    oldDisplayName = parsed ? parsed.displayName : oldFullName.replace('gt-', '');
+    stableId = parsed ? parsed.stableId : null;
+    newDisplayName = renameArgs[0];
+  } else if (renameArgs.length === 2) {
+    // Outside: gt rename <existing> <new-name>
+    // User provides display name, we need to find the full name
+    const searchName = renameArgs[0];
+    const found = findSessionByDisplayName(searchName);
+    if (!found) {
+      console.log('');
+      console.log(`   ${RED}Error:${RESET} Session '${searchName}' not found.`);
+      console.log('');
+      listSessionsInline();
+      console.log('');
+      process.exit(1);
+    }
+    oldFullName = found.fullName;
+    oldDisplayName = found.displayName;
+    stableId = found.stableId;
+    newDisplayName = renameArgs[1];
+  } else {
+    console.log('');
+    console.log(`   ${RED}Error:${RESET} Invalid arguments.`);
+    console.log('');
+    console.log('   Usage: gt rename <existing-session> <new-name>');
+    console.log('          gt rename <new-name>  (when inside a session)');
+    console.log('');
+    process.exit(1);
+  }
+
+  // Validate new name
+  const validation = validateSessionName(newDisplayName);
+  if (!validation.valid) {
+    console.log('');
+    console.log(`   ${RED}Error:${RESET} ${validation.error}`);
+    console.log('');
+    listSessionsInline();
+    console.log('');
+    process.exit(1);
+  }
+
+  // Check new display name doesn't conflict
+  if (displayNameExists(newDisplayName)) {
+    console.log('');
+    console.log(`   ${RED}Error:${RESET} Session '${newDisplayName}' already exists.`);
+    console.log('');
+    listSessionsInline();
+    console.log('');
+    process.exit(1);
+  }
+
+  // Build new full name, preserving stable ID if present
+  const newFullName = stableId ? `gt-${stableId}-${newDisplayName}` : `gt-${newDisplayName}`;
+
+  // Perform rename
+  try {
+    execSync(`tmux rename-session -t "${oldFullName}" "${newFullName}"`, { stdio: 'pipe' });
+    console.log('');
+    console.log(`   ${BOLD_YELLOW}Session renamed: ${oldDisplayName} -> ${newDisplayName}${RESET}`);
+    console.log('');
+    process.exit(0);
+  } catch (err) {
+    console.log('');
+    console.log(`   ${RED}Error:${RESET} Failed to rename session.`);
+    console.log('');
+    process.exit(1);
+  }
+}
+
+// ============================================================================
+// Parse CLI arguments
+// ============================================================================
+
+function parseArgs(argv) {
+  const args = argv.slice(2);
+  let port = null;
+  let command = null;
+  let handled = false;
+  let sessionName = null;
+  let useHttp = false;
+  let serverBackgroundMode = false;
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+
+    if (arg === '-h' || arg === '--help') {
+      console.log(`
+Usage: ghosttown [options] [command]
+
+Options:
+  -p, --port <port>    Port to listen on (default: 8080, or PORT env var)
+  -n, --name <name>    Give the session a custom name (use with a command)
+  --http               Use HTTP instead of HTTPS (default is HTTPS)
+  -k, --kill [session] Kill a session (current if inside one, or specify by name/ID)
+  -ka, --kill-all      Kill all ghosttown sessions
+  -v, --version        Show version number
+  -h, --help           Show this help message
+
+Commands:
+  start [-p <port>]  Start the server in the background (default port: 8080)
+  stop               Stop the background server
+  status             Show server status and URLs
+  list               List all ghosttown tmux sessions
+  attach <name|id>   Attach to a ghosttown session by name or ID
+  detach             Detach from current ghosttown session
+  rename [old] <new> Rename a session (current session if only one arg given)
+  update             Update ghosttown to the latest version
+  <command>          Run command in a new tmux session
+
+Examples:
+  ghosttown start                          Start the server in the background
+  ghosttown start -p 3000                  Start on port 3000
+  ghosttown stop                           Stop the background server
+  ghosttown status                         Check if server is running
+  ghosttown                                Start the web terminal server (foreground)
+  ghosttown -p 3000                        Start the server on port 3000 (foreground)
+  ghosttown --http                         Use plain HTTP instead of HTTPS
+  ghosttown list                           List all ghosttown sessions
+  ghosttown attach 1                       Attach to session gt-1
+  ghosttown attach my-project              Attach to session gt-my-project
+  ghosttown detach                         Detach from current session
+  ghosttown rename my-project              Rename current session to 'my-project'
+  ghosttown rename 1 my-project            Rename session gt-1 to gt-my-project
+  ghosttown update                         Update to the latest version
+  ghosttown -k                             Kill current session (when inside one)
+  ghosttown -k my-project                  Kill session gt-my-project
+  ghosttown -ka                            Kill all ghosttown sessions
+  ghosttown -n my-project vim              Run vim in session named 'gt-my-project'
+  ghosttown vim                            Run vim in auto-named session (gt-1, gt-2, etc.)
+  ghosttown "npm run dev"                  Run npm in a new tmux session
+
+Aliases:
+  This CLI can also be invoked as 'gt' or 'ght'.
+`);
+      handled = true;
+      break;
+    }
+
+    // Handle version flag
+    if (arg === '-v' || arg === '--version') {
+      console.log(VERSION);
+      handled = true;
+      break;
+    }
+
+    // Handle list command
+    if (arg === 'list') {
+      handled = true;
+      listSessions();
+      // listSessions exits, so this won't be reached
+    }
+
+    // Handle detach command
     else if (arg === 'detach') {
       handled = true;
       detachFromTmux();
@@ -652,8 +1532,8 @@ Aliases:
     else if (arg === 'attach') {
       const sessionArg = args[i + 1];
       if (!sessionArg) {
-        console.error('Error: attach requires a session name');
-        console.error('Usage: ghosttown attach <session>');
+        console.error('Error: attach requires a session name or ID');
+        console.error('Usage: gt attach <name|id>');
         handled = true;
         break;
       }
@@ -662,6 +1542,14 @@ Aliases:
       // attachToSession exits, so this won't be reached
     }
 
+    // Handle rename command
+    else if (arg === 'rename') {
+      const renameArgs = args.slice(i + 1);
+      handled = true;
+      renameSession(renameArgs);
+      // renameSession exits, so this won't be reached
+    }
+
     // Handle kill command
     else if (arg === '-k' || arg === '--kill') {
       const nextArg = args[i + 1];
@@ -670,6 +1558,51 @@ Aliases:
       handled = true;
       killSession(sessionArg);
       // killSession exits, so this won't be reached
+    }
+
+    // Handle kill-all command
+    else if (arg === '-ka' || arg === '--kill-all') {
+      handled = true;
+      killAllSessions();
+      // killAllSessions exits, so this won't be reached
+    }
+
+    // Handle start command
+    else if (arg === 'start') {
+      // Check for -p flag after 'start'
+      let startPort = 8080;
+      if (args[i + 1] === '-p' || args[i + 1] === '--port') {
+        const portArg = args[i + 2];
+        if (portArg) {
+          startPort = Number.parseInt(portArg, 10);
+          if (Number.isNaN(startPort) || startPort < 1 || startPort > 65535) {
+            console.error(`Error: Invalid port number: ${portArg}`);
+            process.exit(1);
+          }
+        }
+      }
+      handled = true;
+      startServerInBackground(startPort);
+      // startServerInBackground exits, so this won't be reached
+    }
+
+    // Handle stop command
+    else if (arg === 'stop') {
+      handled = true;
+      stopServer();
+      // stopServer exits, so this won't be reached
+    }
+
+    // Handle status command
+    else if (arg === 'status') {
+      handled = true;
+      showServerStatus();
+      // showServerStatus exits, so this won't be reached
+    }
+
+    // Handle hidden --server-background flag (used internally by gt start)
+    else if (arg === '--server-background') {
+      serverBackgroundMode = true;
     } else if (arg === '-p' || arg === '--port') {
       const nextArg = args[i + 1];
       if (!nextArg || nextArg.startsWith('-')) {
@@ -684,6 +1617,22 @@ Aliases:
       i++; // Skip the next argument since we consumed it
     }
 
+    // Handle name flag
+    else if (arg === '-n' || arg === '--name') {
+      const nextArg = args[i + 1];
+      if (!nextArg || nextArg.startsWith('-')) {
+        console.error(`Error: ${arg} requires a session name`);
+        process.exit(1);
+      }
+      sessionName = nextArg;
+      i++; // Skip the next argument since we consumed it
+    }
+
+    // Handle http flag (disables HTTPS)
+    else if (arg === '--http') {
+      useHttp = true;
+    }
+
     // First non-flag argument starts the command
     // Capture it and all remaining arguments as the command
     else if (!arg.startsWith('-')) {
@@ -692,7 +1641,7 @@ Aliases:
     }
   }
 
-  return { port, command, handled };
+  return { port, command, handled, sessionName, useHttp, serverBackgroundMode };
 }
 
 // ============================================================================
@@ -701,6 +1650,46 @@ Aliases:
 
 function startWebServer(cliArgs) {
   const HTTP_PORT = cliArgs.port || process.env.PORT || 8080;
+  const USE_HTTPS = !cliArgs.useHttp;
+  const backgroundMode = cliArgs.serverBackgroundMode || false;
+
+  // Generate self-signed certificate for HTTPS
+  function generateSelfSignedCert() {
+    try {
+      const certDir = path.join(homedir(), '.ghosttown');
+      const keyPath = path.join(certDir, 'server.key');
+      const certPath = path.join(certDir, 'server.crt');
+
+      // Check if certs already exist
+      if (fs.existsSync(keyPath) && fs.existsSync(certPath)) {
+        return {
+          key: fs.readFileSync(keyPath),
+          cert: fs.readFileSync(certPath),
+        };
+      }
+
+      // Create cert directory
+      if (!fs.existsSync(certDir)) {
+        fs.mkdirSync(certDir, { recursive: true });
+      }
+
+      // Generate using openssl
+      console.log('Generating self-signed certificate...');
+      execSync(
+        `openssl req -x509 -newkey rsa:2048 -keyout "${keyPath}" -out "${certPath}" -days 365 -nodes -subj "/CN=localhost"`,
+        { stdio: 'pipe' }
+      );
+
+      return {
+        key: fs.readFileSync(keyPath),
+        cert: fs.readFileSync(certPath),
+      };
+    } catch (err) {
+      console.error('Failed to generate SSL certificate.');
+      console.error('Make sure openssl is installed: brew install openssl');
+      process.exit(1);
+    }
+  }
 
   // ============================================================================
   // Locate ghosttown assets
@@ -771,6 +1760,208 @@ function startWebServer(cliArgs) {
         height: var(--vvh);
       }
 
+      /* Session List View Styles */
+      .session-list-view {
+        display: none;
+        width: 100%;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+        padding: 8px;
+        box-sizing: border-box;
+      }
+
+      .session-list-view.active {
+        display: flex;
+      }
+
+      .session-card {
+        background: #1e2127;
+        border-radius: 12px;
+        padding: 24px;
+        width: 100%;
+        max-width: 600px;
+        box-sizing: border-box;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+      }
+
+      .session-card h1 {
+        color: #e5e5e5;
+        font-size: 24px;
+        font-weight: 600;
+        margin-bottom: 20px;
+        text-align: center;
+      }
+
+      .session-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-bottom: 20px;
+      }
+
+      .session-table th {
+        color: #888;
+        font-size: 11px;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        text-align: left;
+        padding: 8px 12px;
+        border-bottom: 1px solid #3a3f4b;
+      }
+
+      .session-table td {
+        color: #d4d4d4;
+        font-size: 13px;
+        padding: 12px;
+        border-bottom: 1px solid #2a2f38;
+      }
+
+      .session-table tr.session-row {
+        transition: background 0.15s;
+      }
+
+      .session-table tr.session-row:hover {
+        background: #2a2f38;
+      }
+
+      .session-table tr.session-row td {
+        padding: 0;
+      }
+
+      .session-table tr.session-row td a {
+        display: block;
+        padding: 12px;
+        color: inherit;
+        text-decoration: none;
+      }
+
+      .session-table tr.session-row td.actions-cell {
+        padding: 12px 8px;
+        width: 40px;
+      }
+
+      .copy-btn {
+        background: transparent;
+        border: 1px solid #3a3f48;
+        border-radius: 4px;
+        color: #8a8f98;
+        cursor: pointer;
+        padding: 4px 8px;
+        font-size: 12px;
+        transition: all 0.15s;
+        min-width: 60px;
+      }
+
+      .copy-btn:hover {
+        background: #3a3f48;
+        color: #fff;
+      }
+
+      .copy-btn.copied {
+        color: #4ade80;
+        border-color: #4ade80;
+      }
+
+      .session-status {
+        display: inline-block;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 11px;
+        font-weight: 500;
+      }
+
+      .session-status.connected {
+        background: rgba(39, 201, 63, 0.2);
+        color: #27c93f;
+      }
+
+      .session-status.disconnected {
+        background: rgba(255, 189, 46, 0.2);
+        color: #ffbd2e;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 40px 20px;
+        color: #888;
+      }
+
+      .empty-state p {
+        margin-bottom: 20px;
+        font-size: 14px;
+      }
+
+      .create-btn {
+        background: #3a7afe;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.15s;
+        display: block;
+        width: 100%;
+      }
+
+      .create-btn:hover {
+        background: #2563eb;
+      }
+
+      .button-row {
+        display: flex;
+        gap: 12px;
+      }
+
+      .button-row .create-btn {
+        flex: 1;
+      }
+
+      .logout-btn {
+        background: transparent;
+        color: #888;
+        border: 1px solid #3a3f48;
+        padding: 10px 16px;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s;
+      }
+
+      .logout-btn:hover {
+        background: #3a3f48;
+        color: #fff;
+      }
+
+      .error-message {
+        background: rgba(255, 95, 86, 0.1);
+        border: 1px solid rgba(255, 95, 86, 0.3);
+        border-radius: 6px;
+        padding: 12px 16px;
+        margin-bottom: 16px;
+        color: #ff5f56;
+        font-size: 13px;
+        display: none;
+      }
+
+      .error-message.visible {
+        display: block;
+      }
+
+      /* Terminal View Styles */
+      .terminal-view {
+        display: none;
+        width: 100%;
+        height: 100%;
+      }
+
+      .terminal-view.active {
+        display: block;
+      }
+
       .terminal-window {
         width: 100%;
         height: 100%;
@@ -833,6 +2024,21 @@ function startWebServer(cliArgs) {
         white-space: nowrap;
       }
 
+      .back-link {
+        color: #888;
+        font-size: 12px;
+        text-decoration: none;
+        margin-right: 8px;
+        padding: 4px 8px;
+        border-radius: 4px;
+        transition: background 0.15s, color 0.15s;
+      }
+
+      .back-link:hover {
+        background: #3a4049;
+        color: #e5e5e5;
+      }
+
       .connection-status {
         margin-left: auto;
         font-size: 11px;
@@ -865,35 +2071,311 @@ function startWebServer(cliArgs) {
         display: block;
         touch-action: none;
       }
+
+      .connection-error-overlay {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(41, 44, 52, 0.95);
+        z-index: 100;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+        text-align: center;
+      }
+
+      .connection-error-overlay.visible {
+        display: flex;
+      }
+
+      .connection-error-overlay h2 {
+        color: #ff5f56;
+        margin-bottom: 16px;
+        font-size: 18px;
+      }
+
+      .connection-error-overlay p {
+        color: #d4d4d4;
+        margin-bottom: 12px;
+        line-height: 1.5;
+        max-width: 300px;
+      }
+
+      .connection-error-overlay a {
+        color: #27c93f;
+        text-decoration: underline;
+      }
+
+      .connection-error-overlay .retry-btn {
+        margin-top: 16px;
+        padding: 8px 24px;
+        background: #27c93f;
+        color: #1e2127;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+      }
     </style>
   </head>
   <body>
-    <div class="terminal-window">
-      <div class="title-bar">
-        <div class="traffic-lights">
-          <span class="light red"></span>
-          <span class="light yellow"></span>
-          <span class="light green"></span>
+    <!-- Session List View -->
+    <div class="session-list-view" id="session-list-view">
+      <div class="session-card">
+        <h1>Ghost Town</h1>
+        <div class="error-message" id="error-message"></div>
+        <div id="session-list-content">
+          <!-- Populated by JavaScript -->
+        </div>
+        <div class="button-row">
+          <button class="create-btn" id="create-session-btn">Create Session</button>
+          <button class="logout-btn" id="logout-btn">Logout</button>
         </div>
-        <div class="title">
-          <span>ghosttown</span>
-          <span class="title-separator" id="title-separator" style="display: none">•</span>
-          <span class="current-directory" id="current-directory"></span>
+      </div>
+    </div>
+
+    <!-- Terminal View -->
+    <div class="terminal-view" id="terminal-view">
+      <div class="terminal-window">
+        <div class="title-bar">
+          <div class="traffic-lights">
+            <span class="light red"></span>
+            <span class="light yellow"></span>
+            <span class="light green"></span>
+          </div>
+          <a href="/" class="back-link" id="back-link">&larr; Sessions</a>
+          <div class="title">
+            <span id="session-name">ghosttown</span>
+            <span class="title-separator" id="title-separator" style="display: none">•</span>
+            <span class="current-directory" id="current-directory"></span>
+          </div>
+          <div class="connection-status">
+            <span class="connection-dot" id="connection-dot"></span>
+            <span id="connection-text">Disconnected</span>
+          </div>
         </div>
-        <div class="connection-status">
-          <span class="connection-dot" id="connection-dot"></span>
-          <span id="connection-text">Disconnected</span>
+        <div id="terminal-container"></div>
+        <div class="connection-error-overlay" id="connection-error">
+          <h2>Connection Failed</h2>
+          <p>Unable to connect to the terminal.</p>
+          <p id="connection-error-hint"></p>
+          <button class="retry-btn" onclick="location.reload()">Retry</button>
         </div>
       </div>
-      <div id="terminal-container"></div>
     </div>
 
+    <script>
+      // Server tells client if using self-signed certificate (for mobile SSE fallback)
+      window.__SELF_SIGNED_CERT__ = ${USE_HTTPS};
+    </script>
     <script type="module">
       import { init, Terminal, FitAddon } from '/dist/ghostty-web.js';
 
       let term;
       let ws;
       let fitAddon;
+      let currentSessionName = null;
+
+      // HTML escape to prevent XSS when inserting user data into templates
+      function escapeHtml(str) {
+        return String(str)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+      }
+
+      // Get session info from URL query parameters
+      // Returns { name, stableId } or null
+      function getSessionFromUrl() {
+        const params = new URLSearchParams(window.location.search);
+        const name = params.get('session');
+        const stableId = params.get('id');
+        if (name || stableId) {
+          return { name, stableId };
+        }
+        return null;
+      }
+
+      // Check which view to show
+      async function initApp() {
+        const sessionInfo = getSessionFromUrl();
+
+        if (sessionInfo && sessionInfo.stableId) {
+          // Show terminal view using stable ID
+          showTerminalView(sessionInfo.stableId);
+        } else if (sessionInfo && sessionInfo.name) {
+          // Legacy URL with just name - show terminal view
+          showTerminalView(sessionInfo.name);
+        } else {
+          // Show session list view
+          showSessionListView();
+        }
+      }
+
+      // Show session list view
+      async function showSessionListView() {
+        document.getElementById('session-list-view').classList.add('active');
+        document.getElementById('terminal-view').classList.remove('active');
+        document.title = 'Ghost Town';
+
+        await refreshSessionList();
+
+        // Set up create button
+        document.getElementById('create-session-btn').onclick = createSession;
+
+        // Set up logout button
+        document.getElementById('logout-btn').onclick = logout;
+      }
+
+      // Logout and redirect to login page
+      async function logout() {
+        try {
+          await fetch('/api/logout', { method: 'POST' });
+        } catch (err) {
+          // Ignore errors, redirect anyway
+        }
+        window.location.href = '/login';
+      }
+
+      // Refresh the session list
+      async function refreshSessionList() {
+        try {
+          const response = await fetch('/api/sessions');
+          const data = await response.json();
+
+          const content = document.getElementById('session-list-content');
+
+          if (data.sessions.length === 0) {
+            content.innerHTML = \`
+              <div class="empty-state">
+                <p>No sessions yet</p>
+              </div>
+            \`;
+          } else {
+            const rows = data.sessions.map(session => {
+              const lastActivity = new Date(session.lastActivity).toLocaleString();
+              const statusClass = session.attached ? 'connected' : 'disconnected';
+              const statusText = session.attached ? 'attached' : 'detached';
+              // URL format: /?session=<name>&id=<stableId>
+              const sessionUrl = '/?session=' + encodeURIComponent(session.name) + (session.stableId ? '&id=' + encodeURIComponent(session.stableId) : '');
+              return \`
+                <tr class="session-row">
+                  <td><a href="\${sessionUrl}">\${escapeHtml(session.name)}</a></td>
+                  <td><a href="\${sessionUrl}">\${lastActivity}</a></td>
+                  <td><a href="\${sessionUrl}"><span class="session-status \${statusClass}">\${statusText}</span></a></td>
+                  <td class="actions-cell"><button class="copy-btn" onclick="copySessionUrl(event, '\${escapeHtml(session.name)}', '\${escapeHtml(session.stableId || '')}')" title="Copy URL">Copy</button></td>
+                </tr>
+              \`;
+            }).join('');
+
+            content.innerHTML = \`
+              <table class="session-table">
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Last Activity</th>
+                    <th>Status</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  \${rows}
+                </tbody>
+              </table>
+            \`;
+          }
+        } catch (err) {
+          console.error('Failed to fetch sessions:', err);
+        }
+      }
+
+      // Copy session URL to clipboard (global for onclick handlers)
+      window.copySessionUrl = function(event, sessionName, stableId) {
+        event.preventDefault();
+        event.stopPropagation();
+        let url = window.location.origin + '/?session=' + encodeURIComponent(sessionName);
+        if (stableId) {
+          url += '&id=' + encodeURIComponent(stableId);
+        }
+        navigator.clipboard.writeText(url).then(() => {
+          const btn = event.target;
+          btn.textContent = 'Copied!';
+          btn.classList.add('copied');
+          setTimeout(() => {
+            btn.textContent = 'Copy';
+            btn.classList.remove('copied');
+          }, 2000);
+        }).catch(err => {
+          console.error('Failed to copy:', err);
+        });
+      };
+
+      // Create a new session
+      async function createSession() {
+        try {
+          const response = await fetch('/api/sessions/create', { method: 'POST' });
+          const data = await response.json();
+          // URL format: /?session=<name>&id=<stableId>
+          window.location.href = '/?session=' + encodeURIComponent(data.name) + '&id=' + encodeURIComponent(data.stableId);
+        } catch (err) {
+          console.error('Failed to create session:', err);
+          showError('Failed to create session');
+        }
+      }
+
+      // Show error message
+      function showError(message) {
+        const errorEl = document.getElementById('error-message');
+        errorEl.textContent = message;
+        errorEl.classList.add('visible');
+      }
+
+      // Show terminal view
+      // sessionId is the stable ID used for WebSocket connection
+      async function showTerminalView(sessionId) {
+        currentSessionName = sessionId; // Will be updated when session_info arrives
+        document.getElementById('session-list-view').classList.remove('active');
+        document.getElementById('terminal-view').classList.add('active');
+        // Show loading state until we get the real name from session_info
+        document.getElementById('session-name').textContent = 'Loading...';
+        document.title = 'ghosttown';
+
+        // Fallback: if session_info doesn't arrive within 5 seconds, use the sessionId
+        const loadingTimeout = setTimeout(() => {
+          const nameEl = document.getElementById('session-name');
+          if (nameEl && nameEl.textContent === 'Loading...') {
+            nameEl.textContent = sessionId;
+            document.title = sessionId + ' - ghosttown';
+          }
+        }, 5000);
+
+        try {
+          await initTerminal();
+        } catch (err) {
+          clearTimeout(loadingTimeout);
+          document.getElementById('session-name').textContent = sessionId;
+          console.error('Terminal init failed:', err);
+        }
+      }
+
+      // Update session display name (called when session_info is received)
+      function updateSessionDisplay(displayName, stableId) {
+        currentSessionName = stableId;
+        document.getElementById('session-name').textContent = displayName;
+        document.title = displayName + ' - ghosttown';
+
+        // Update URL to reflect current session name (in case it was renamed)
+        const newUrl = '/?session=' + encodeURIComponent(displayName) + '&id=' + encodeURIComponent(stableId);
+        if (window.location.search !== newUrl) {
+          history.replaceState(null, '', newUrl);
+        }
+      }
 
       async function initTerminal() {
         await init();
@@ -1008,14 +2490,18 @@ function startWebServer(cliArgs) {
 
         // Handle terminal resize
         term.onResize((size) => {
-          if (ws && ws.readyState === WebSocket.OPEN) {
+          if (useSSE) {
+            sendResizeViaPost(size.cols, size.rows);
+          } else if (ws && ws.readyState === WebSocket.OPEN) {
             ws.send(JSON.stringify({ type: 'resize', cols: size.cols, rows: size.rows }));
           }
         });
 
         // Handle user input
         term.onData((data) => {
-          if (ws && ws.readyState === WebSocket.OPEN) {
+          if (useSSE) {
+            sendInputViaPost(data);
+          } else if (ws && ws.readyState === WebSocket.OPEN) {
             ws.send(data);
           }
         });
@@ -1035,20 +2521,152 @@ function startWebServer(cliArgs) {
           }
         });
 
-        connectWebSocket();
+        // On mobile + self-signed cert, go straight to SSE (WebSocket won't work)
+        const isMobile = window.matchMedia && window.matchMedia('(pointer: coarse)').matches;
+        const isSelfSigned = window.__SELF_SIGNED_CERT__ === true;
+
+        if (isMobile && isSelfSigned) {
+          console.log('Mobile + self-signed cert: using SSE transport');
+          useSSE = true;
+          connectSSE();
+        } else {
+          connectWebSocket();
+        }
+      }
+
+      let useSSE = false;
+      let sseSource = null;
+      let sseConnectionId = null;
+
+      function showConnectionError() {
+        const overlay = document.getElementById('connection-error');
+        const hint = document.getElementById('connection-error-hint');
+        hint.textContent = 'Unable to establish connection. Check that the server is running.';
+        overlay.classList.add('visible');
+      }
+
+      function hideConnectionError() {
+        document.getElementById('connection-error').classList.remove('visible');
+      }
+
+      // SSE connection (for mobile with self-signed certs)
+      function connectSSE() {
+        const sseUrl = '/sse?cols=' + term.cols + '&rows=' + term.rows + '&session=' + encodeURIComponent(currentSessionName);
+
+        sseSource = new EventSource(sseUrl);
+
+        sseSource.onopen = () => {
+          hideConnectionError();
+          updateConnectionStatus(true);
+        };
+
+        sseSource.onmessage = (event) => {
+          try {
+            const msg = JSON.parse(event.data);
+
+            if (msg.type === 'session_info') {
+              sseConnectionId = msg.connectionId;
+              updateSessionDisplay(msg.name, msg.stableId);
+              return;
+            }
+
+            if (msg.type === 'output') {
+              const decoded = atob(msg.data);
+              term.write(decoded);
+              return;
+            }
+
+            if (msg.type === 'error') {
+              updateConnectionStatus(false);
+              showError(msg.message);
+              document.getElementById('terminal-view').classList.remove('active');
+              document.getElementById('session-list-view').classList.add('active');
+              refreshSessionList();
+              return;
+            }
+
+            if (msg.type === 'exit') {
+              updateConnectionStatus(false);
+              return;
+            }
+          } catch (e) {
+            console.error('SSE message parse error:', e);
+          }
+        };
+
+        sseSource.onerror = () => {
+          updateConnectionStatus(false);
+          sseSource.close();
+          setTimeout(() => {
+            if (useSSE) {
+              connectSSE();
+            }
+          }, 3000);
+        };
+      }
+
+      // Send input via POST (used with SSE)
+      function sendInputViaPost(data) {
+        if (!sseConnectionId) return;
+
+        fetch('/api/input', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            connectionId: sseConnectionId,
+            data: btoa(data),
+          }),
+          credentials: 'same-origin',
+        }).catch(() => {});
+      }
+
+      // Send resize via POST (used with SSE)
+      function sendResizeViaPost(cols, rows) {
+        if (!sseConnectionId) return;
+
+        fetch('/api/input', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            connectionId: sseConnectionId,
+            type: 'resize',
+            cols,
+            rows,
+          }),
+          credentials: 'same-origin',
+        }).catch(() => {});
       }
 
+      // WebSocket-only connection (desktop or HTTP)
       function connectWebSocket() {
         const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const wsUrl = protocol + '//' + window.location.host + '/ws?cols=' + term.cols + '&rows=' + term.rows;
+        const wsUrl = protocol + '//' + window.location.host + '/ws?cols=' + term.cols + '&rows=' + term.rows + '&session=' + encodeURIComponent(currentSessionName);
 
         ws = new WebSocket(wsUrl);
 
         ws.onopen = () => {
+          hideConnectionError();
           updateConnectionStatus(true);
         };
 
         ws.onmessage = (event) => {
+          if (event.data.startsWith('{')) {
+            try {
+              const msg = JSON.parse(event.data);
+              if (msg.type === 'error') {
+                updateConnectionStatus(false);
+                showError(msg.message);
+                document.getElementById('terminal-view').classList.remove('active');
+                document.getElementById('session-list-view').classList.add('active');
+                refreshSessionList();
+                return;
+              }
+              if (msg.type === 'session_info') {
+                updateSessionDisplay(msg.name, msg.stableId);
+                return;
+              }
+            } catch (e) {}
+          }
           term.write(event.data);
         };
 
@@ -1078,7 +2696,250 @@ function startWebServer(cliArgs) {
         }
       }
 
-      initTerminal();
+      initApp();
+    </script>
+  </body>
+</html>`;
+
+  // ============================================================================
+  // Login Page Template
+  // ============================================================================
+
+  const LOGIN_TEMPLATE = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>login - ghosttown</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        background: #292c34;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 40px 20px;
+      }
+
+      .login-window {
+        width: 100%;
+        max-width: 400px;
+        background: #1e2127;
+        border-radius: 12px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+        overflow: hidden;
+      }
+
+      .title-bar {
+        background: #292c34;
+        padding: 12px 16px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        border-bottom: 1px solid #1a1a1a;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+      }
+
+      .light {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+      }
+
+      .light.red { background: #ff5f56; }
+      .light.yellow { background: #ffbd2e; }
+      .light.green { background: #27c93f; }
+
+      .title {
+        color: #e5e5e5;
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: 0.3px;
+      }
+
+      .login-content {
+        padding: 32px;
+      }
+
+      .login-header {
+        text-align: center;
+        margin-bottom: 24px;
+      }
+
+      .login-header h1 {
+        color: #e5e5e5;
+        font-size: 24px;
+        font-weight: 600;
+        margin-bottom: 8px;
+      }
+
+      .login-header p {
+        color: #888;
+        font-size: 14px;
+      }
+
+      .form-group {
+        margin-bottom: 16px;
+      }
+
+      .form-group label {
+        display: block;
+        color: #888;
+        font-size: 12px;
+        margin-bottom: 6px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .form-group input {
+        width: 100%;
+        padding: 12px 14px;
+        background: #292c34;
+        border: 1px solid #3d3d3d;
+        border-radius: 6px;
+        color: #e5e5e5;
+        font-size: 14px;
+        transition: border-color 0.2s;
+      }
+
+      .form-group input:focus {
+        outline: none;
+        border-color: #27c93f;
+      }
+
+      .form-group input::placeholder {
+        color: #666;
+      }
+
+      .error-message {
+        background: rgba(255, 95, 86, 0.1);
+        border: 1px solid rgba(255, 95, 86, 0.3);
+        color: #ff5f56;
+        padding: 12px;
+        border-radius: 6px;
+        font-size: 13px;
+        margin-bottom: 16px;
+        display: none;
+      }
+
+      .error-message.visible {
+        display: block;
+      }
+
+      .submit-btn {
+        width: 100%;
+        padding: 14px;
+        background: #27c93f;
+        border: none;
+        border-radius: 6px;
+        color: #1e1e1e;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+
+      .submit-btn:hover {
+        background: #2bd946;
+      }
+
+      .submit-btn:disabled {
+        background: #3d3d3d;
+        color: #888;
+        cursor: not-allowed;
+      }
+
+      .hint {
+        text-align: center;
+        margin-top: 20px;
+        color: #666;
+        font-size: 12px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="login-window">
+      <div class="title-bar">
+        <div class="traffic-lights">
+          <div class="light red"></div>
+          <div class="light yellow"></div>
+          <div class="light green"></div>
+        </div>
+        <span class="title">Ghost Town</span>
+      </div>
+      <div class="login-content">
+        <div class="login-header">
+          <h1>Sign In</h1>
+          <p>Use your macOS account credentials</p>
+        </div>
+        <div class="error-message" id="error-message"></div>
+        <form id="login-form">
+          <div class="form-group">
+            <label for="username">Username</label>
+            <input type="text" id="username" name="username" placeholder="macOS username" autocomplete="username" required autofocus />
+          </div>
+          <div class="form-group">
+            <label for="password">Password</label>
+            <input type="password" id="password" name="password" placeholder="macOS password" autocomplete="current-password" required />
+          </div>
+          <button type="submit" class="submit-btn" id="submit-btn">Sign In</button>
+        </form>
+        <p class="hint">Your session will expire after 3 days</p>
+      </div>
+    </div>
+
+    <script>
+      const form = document.getElementById('login-form');
+      const errorMessage = document.getElementById('error-message');
+      const submitBtn = document.getElementById('submit-btn');
+
+      form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+
+        const username = document.getElementById('username').value;
+        const password = document.getElementById('password').value;
+
+        submitBtn.disabled = true;
+        submitBtn.textContent = 'Signing in...';
+        errorMessage.classList.remove('visible');
+
+        try {
+          const response = await fetch('/api/login', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ username, password }),
+          });
+
+          const data = await response.json();
+
+          if (data.success) {
+            window.location.href = '/';
+          } else {
+            errorMessage.textContent = data.error || 'Invalid username or password';
+            errorMessage.classList.add('visible');
+            submitBtn.disabled = false;
+            submitBtn.textContent = 'Sign In';
+          }
+        } catch (err) {
+          errorMessage.textContent = 'Connection error. Please try again.';
+          errorMessage.classList.add('visible');
+          submitBtn.disabled = false;
+          submitBtn.textContent = 'Sign In';
+        }
+      });
     </script>
   </body>
 </html>`;
@@ -1100,37 +2961,345 @@ function startWebServer(cliArgs) {
   };
 
   // ============================================================================
-  // HTTP Server
+  // HTTP/HTTPS Server
   // ============================================================================
 
-  const httpServer = http.createServer((req, res) => {
+  // Get SSL options if HTTPS is enabled
+  const sslOptions = USE_HTTPS ? generateSelfSignedCert() : null;
+
+  // Helper to set auth cookie (with Secure flag when HTTPS)
+  function setAuthCookieSecure(res, token) {
+    const maxAge = SESSION_EXPIRATION_MS / 1000;
+    const secureFlag = USE_HTTPS ? ' Secure;' : '';
+    res.setHeader(
+      'Set-Cookie',
+      `ghostty_session=${token}; HttpOnly;${secureFlag} SameSite=Strict; Path=/; Max-Age=${maxAge}`
+    );
+  }
+
+  const httpServer = USE_HTTPS
+    ? https.createServer(sslOptions, async (req, res) => {
+        await handleRequest(req, res);
+      })
+    : http.createServer(async (req, res) => {
+        await handleRequest(req, res);
+      });
+
+  async function handleRequest(req, res) {
     const url = new URL(req.url, `http://${req.headers.host}`);
     const pathname = url.pathname;
+    const cookies = parseCookies(req.headers.cookie);
+    const session = validateAuthSession(cookies.ghostty_session);
+
+    // Handle login API endpoint
+    if (pathname === '/api/login' && req.method === 'POST') {
+      const clientIP = getClientIP(req);
+
+      // Check rate limit before processing
+      const rateCheck = checkRateLimit(clientIP);
+      if (!rateCheck.allowed) {
+        res.writeHead(429, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: false, error: rateCheck.error }));
+        return;
+      }
+
+      try {
+        const body = await readBody(req);
+        const { username, password } = JSON.parse(body);
+
+        if (!username || !password) {
+          res.writeHead(400, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ success: false, error: 'Username and password required' }));
+          return;
+        }
+
+        const result = await authenticateUser(username, password);
+
+        if (result.success) {
+          recordLoginAttempt(clientIP, true); // Clear rate limit on success
+          const token = generateAuthToken();
+          const now = Date.now();
+          authSessions.set(token, {
+            username: result.username,
+            createdAt: now,
+            lastActivity: now,
+          });
+
+          setAuthCookieSecure(res, token);
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ success: true }));
+        } else {
+          recordLoginAttempt(clientIP, false); // Record failed attempt
+          res.writeHead(401, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ success: false, error: result.error }));
+        }
+      } catch (err) {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: false, error: 'Invalid request' }));
+      }
+      return;
+    }
+
+    // Handle logout API endpoint
+    if (pathname === '/api/logout' && req.method === 'POST') {
+      if (cookies.ghostty_session) {
+        authSessions.delete(cookies.ghostty_session);
+      }
+      clearAuthCookie(res);
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: true }));
+      return;
+    }
+
+    // Serve login page (always accessible)
+    if (pathname === '/login') {
+      res.writeHead(200, { 'Content-Type': 'text/html' });
+      res.end(LOGIN_TEMPLATE);
+      return;
+    }
 
-    // Serve index page
+    // Serve index page (requires authentication)
     if (pathname === '/' || pathname === '/index.html') {
+      if (!session) {
+        res.writeHead(302, { Location: '/login' });
+        res.end();
+        return;
+      }
       res.writeHead(200, { 'Content-Type': 'text/html' });
       res.end(HTML_TEMPLATE);
       return;
     }
 
-    // Serve dist files
+    // Serve dist files (requires authentication)
     if (pathname.startsWith('/dist/')) {
+      if (!session) {
+        res.writeHead(401);
+        res.end('Unauthorized');
+        return;
+      }
       const filePath = path.join(distPath, pathname.slice(6));
       serveFile(filePath, res);
       return;
     }
 
-    // Serve WASM file
+    // Serve WASM file (requires authentication)
     if (pathname === '/ghostty-vt.wasm') {
+      if (!session) {
+        res.writeHead(401);
+        res.end('Unauthorized');
+        return;
+      }
       serveFile(wasmPath, res);
       return;
     }
 
+    // API: List sessions (from tmux) - requires authentication
+    if (pathname === '/api/sessions' && req.method === 'GET') {
+      if (!session) {
+        res.writeHead(401, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Unauthorized' }));
+        return;
+      }
+      try {
+        const output = execSync(
+          'tmux list-sessions -F "#{session_name}|#{session_activity}|#{session_attached}|#{session_windows}"',
+          { encoding: 'utf8', stdio: ['pipe', 'pipe', 'pipe'] }
+        );
+
+        const sessionList = output
+          .split('\n')
+          .filter((line) => line.startsWith('gt-'))
+          .map((line) => {
+            const [fullName, activity, attached, windows] = line.split('|');
+            const parsed = parseSessionName(fullName);
+            return {
+              name: parsed ? parsed.displayName : fullName.replace('gt-', ''),
+              stableId: parsed ? parsed.stableId : null,
+              fullName: fullName,
+              lastActivity: Number.parseInt(activity, 10) * 1000,
+              attached: attached === '1',
+              windows: Number.parseInt(windows, 10),
+            };
+          });
+
+        // Sort by recent activity
+        sessionList.sort((a, b) => b.lastActivity - a.lastActivity);
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ sessions: sessionList }));
+      } catch (err) {
+        // No tmux sessions or tmux not running
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ sessions: [] }));
+      }
+      return;
+    }
+
+    // API: Create session (tmux session) - requires authentication
+    if (pathname === '/api/sessions/create' && req.method === 'POST') {
+      if (!session) {
+        res.writeHead(401, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Unauthorized' }));
+        return;
+      }
+      try {
+        const displayNumber = getNextDisplayNumber();
+
+        // Create a detached session with a temporary name to get its stable ID
+        const tempName = `gt-temp-${Date.now()}`;
+        const output = execSync(
+          `tmux new-session -d -s ${tempName} -x 200 -y 50 -P -F "#{session_id}"`,
+          { encoding: 'utf8', stdio: ['pipe', 'pipe', 'pipe'] }
+        );
+
+        // Extract the stable ID (e.g., "$10" -> "10")
+        const stableId = output.trim().replace('$', '');
+
+        // Rename to final name: gt-<stableId>-<displayNumber>
+        const sessionName = `gt-${stableId}-${displayNumber}`;
+        execSync(`tmux rename-session -t ${tempName} ${sessionName}`, { stdio: 'pipe' });
+
+        // Disable status bar in the new session
+        execSync(`tmux set-option -t ${sessionName} status off`, { stdio: 'pipe' });
+
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ name: String(displayNumber), stableId: stableId }));
+      } catch (err) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Failed to create session' }));
+      }
+      return;
+    }
+
+    // SSE endpoint for terminal output (fallback for mobile when WebSocket fails)
+    if (pathname === '/sse' && req.method === 'GET') {
+      if (!session) {
+        res.writeHead(401, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Unauthorized' }));
+        return;
+      }
+
+      const cols = Number.parseInt(url.searchParams.get('cols') || '80');
+      const rows = Number.parseInt(url.searchParams.get('rows') || '24');
+      const requestedSession = url.searchParams.get('session');
+
+      if (!requestedSession) {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Session parameter required' }));
+        return;
+      }
+
+      // Look up session by stable ID first, then by display name
+      let sessionInfo = findSessionByStableIdWeb(requestedSession);
+      if (!sessionInfo) {
+        sessionInfo = findSessionByDisplayName(requestedSession);
+      }
+      if (!sessionInfo) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: `Session '${requestedSession}' not found` }));
+        return;
+      }
+
+      // Generate unique connection ID
+      const connectionId = `sse-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+
+      // Set up SSE headers
+      res.writeHead(200, {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        Connection: 'keep-alive',
+        'X-SSE-Connection-Id': connectionId,
+      });
+
+      // Send session info as first event
+      res.write(
+        `data: ${JSON.stringify({ type: 'session_info', name: sessionInfo.displayName, stableId: sessionInfo.stableId, connectionId })}\n\n`
+      );
+
+      // Create PTY attached to tmux session
+      const ptyProcess = createTmuxAttachPty(sessionInfo.fullName, cols, rows);
+
+      // Store connection
+      sseConnections.set(connectionId, {
+        res,
+        pty: ptyProcess,
+        stableId: requestedSession,
+        sessionInfo,
+      });
+
+      // Stream terminal output as SSE events
+      ptyProcess.onData((data) => {
+        if (!res.writableEnded) {
+          // Base64 encode to handle binary data safely
+          const encoded = Buffer.from(data).toString('base64');
+          res.write(`data: ${JSON.stringify({ type: 'output', data: encoded })}\n\n`);
+        }
+      });
+
+      ptyProcess.onExit(() => {
+        if (!res.writableEnded) {
+          res.write(`data: ${JSON.stringify({ type: 'exit' })}\n\n`);
+          res.end();
+        }
+        sseConnections.delete(connectionId);
+      });
+
+      // Handle client disconnect
+      req.on('close', () => {
+        const conn = sseConnections.get(connectionId);
+        if (conn) {
+          conn.pty.kill();
+          sseConnections.delete(connectionId);
+        }
+      });
+
+      return;
+    }
+
+    // POST endpoint for terminal input (used with SSE fallback)
+    if (pathname === '/api/input' && req.method === 'POST') {
+      if (!session) {
+        res.writeHead(401, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Unauthorized' }));
+        return;
+      }
+
+      let body = '';
+      req.on('data', (chunk) => {
+        body += chunk;
+      });
+      req.on('end', () => {
+        try {
+          const { connectionId, data, type, cols, rows } = JSON.parse(body);
+
+          const conn = sseConnections.get(connectionId);
+          if (!conn) {
+            res.writeHead(404, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: 'Connection not found' }));
+            return;
+          }
+
+          if (type === 'resize' && cols && rows) {
+            conn.pty.resize(cols, rows);
+          } else if (data) {
+            // Decode base64 input
+            const decoded = Buffer.from(data, 'base64').toString('utf8');
+            conn.pty.write(decoded);
+          }
+
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: true }));
+        } catch (err) {
+          res.writeHead(400, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ error: 'Invalid request' }));
+        }
+      });
+      return;
+    }
+
     // 404
     res.writeHead(404);
     res.end('Not Found');
-  });
+  }
 
   function serveFile(filePath, res) {
     const ext = path.extname(filePath);
@@ -1151,19 +3320,42 @@ function startWebServer(cliArgs) {
   // WebSocket Server
   // ============================================================================
 
-  const sessions = new Map();
+  // Track active WebSocket connections to tmux sessions
+  // ws -> { pty, sessionName }
+  const wsConnections = new Map();
+
+  // Track active SSE connections (fallback for mobile)
+  // connectionId -> { res, pty, stableId, sessionInfo }
+  const sseConnections = new Map();
 
-  function getShell() {
-    if (process.platform === 'win32') {
-      return process.env.COMSPEC || 'cmd.exe';
+  /**
+   * Find a ghosttown session by stable ID (for web connections)
+   * Returns { fullName, displayName, stableId } or null if not found
+   */
+  function findSessionByStableIdWeb(stableId) {
+    try {
+      const output = execSync('tmux list-sessions -F "#{session_name}"', {
+        encoding: 'utf8',
+        stdio: ['pipe', 'pipe', 'pipe'],
+      });
+      const sessions = output.split('\n').filter((s) => s.trim() && s.startsWith('gt-'));
+      for (const fullName of sessions) {
+        const parsed = parseSessionName(fullName);
+        if (parsed && parsed.stableId === stableId) {
+          return parsed;
+        }
+      }
+      return null;
+    } catch (err) {
+      return null;
     }
-    return process.env.SHELL || '/bin/bash';
   }
 
-  function createPtySession(cols, rows) {
-    const shell = getShell();
-
-    const ptyProcess = pty.spawn(shell, [], {
+  /**
+   * Create a PTY that attaches to a tmux session
+   */
+  function createTmuxAttachPty(fullSessionName, cols, rows) {
+    const ptyProcess = pty.spawn('tmux', ['attach-session', '-t', fullSessionName], {
       name: 'xterm-256color',
       cols: cols,
       rows: rows,
@@ -1184,7 +3376,19 @@ function startWebServer(cliArgs) {
     const url = new URL(req.url, `http://${req.headers.host}`);
 
     if (url.pathname === '/ws') {
+      // Validate authentication before allowing WebSocket connection
+      const cookies = parseCookies(req.headers.cookie);
+      const session = validateAuthSession(cookies.ghostty_session);
+
+      if (!session) {
+        // Reject unauthenticated WebSocket connections
+        socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
+        socket.destroy();
+        return;
+      }
+
       wss.handleUpgrade(req, socket, head, (ws) => {
+        req.authSession = session;
         wss.emit('connection', ws, req);
       });
     } else {
@@ -1196,9 +3400,42 @@ function startWebServer(cliArgs) {
     const url = new URL(req.url, `http://${req.headers.host}`);
     const cols = Number.parseInt(url.searchParams.get('cols') || '80');
     const rows = Number.parseInt(url.searchParams.get('rows') || '24');
+    const requestedSession = url.searchParams.get('session');
+
+    // Session parameter is required (should be stable ID)
+    if (!requestedSession) {
+      ws.send(JSON.stringify({ type: 'error', message: 'Session parameter required' }));
+      ws.close();
+      return;
+    }
+
+    // Look up session by stable ID first, then by display name (for legacy URLs)
+    let sessionInfo = findSessionByStableIdWeb(requestedSession);
+    if (!sessionInfo) {
+      // Try looking up by display name
+      sessionInfo = findSessionByDisplayName(requestedSession);
+    }
+    if (!sessionInfo) {
+      ws.send(
+        JSON.stringify({ type: 'error', message: `Session '${requestedSession}' not found` })
+      );
+      ws.close();
+      return;
+    }
+
+    // Create a PTY that attaches to the tmux session
+    const ptyProcess = createTmuxAttachPty(sessionInfo.fullName, cols, rows);
 
-    const ptyProcess = createPtySession(cols, rows);
-    sessions.set(ws, { pty: ptyProcess });
+    wsConnections.set(ws, { pty: ptyProcess, stableId: requestedSession, sessionInfo });
+
+    // Send session info with current display name (may have been renamed)
+    ws.send(
+      JSON.stringify({
+        type: 'session_info',
+        name: sessionInfo.displayName,
+        stableId: sessionInfo.stableId,
+      })
+    );
 
     ptyProcess.onData((data) => {
       if (ws.readyState === ws.OPEN) {
@@ -1206,11 +3443,11 @@ function startWebServer(cliArgs) {
       }
     });
 
-    ptyProcess.onExit(({ exitCode }) => {
+    ptyProcess.onExit(() => {
       if (ws.readyState === ws.OPEN) {
-        ws.send(`\r\n\x1b[33mShell exited (code: ${exitCode})\x1b[0m\r\n`);
         ws.close();
       }
+      wsConnections.delete(ws);
     });
 
     ws.on('message', (data) => {
@@ -1232,15 +3469,19 @@ function startWebServer(cliArgs) {
     });
 
     ws.on('close', () => {
-      const session = sessions.get(ws);
-      if (session) {
-        session.pty.kill();
-        sessions.delete(ws);
+      const conn = wsConnections.get(ws);
+      if (conn) {
+        conn.pty.kill();
+        wsConnections.delete(ws);
       }
     });
 
     ws.on('error', () => {
-      // Ignore socket errors
+      const conn = wsConnections.get(ws);
+      if (conn) {
+        conn.pty.kill();
+        wsConnections.delete(ws);
+      }
     });
   });
 
@@ -1248,20 +3489,7 @@ function startWebServer(cliArgs) {
   // Startup
   // ============================================================================
 
-  function getLocalIPs() {
-    const interfaces = networkInterfaces();
-    const ips = [];
-    for (const name of Object.keys(interfaces)) {
-      for (const iface of interfaces[name] || []) {
-        if (iface.family === 'IPv4' && !iface.internal) {
-          ips.push(iface.address);
-        }
-      }
-    }
-    return ips;
-  }
-
-  function printBanner(url) {
+  function printBanner(url, backgroundMode = false) {
     const localIPs = getLocalIPs();
     // ANSI color codes
     const RESET = '\x1b[0m';
@@ -1281,7 +3509,8 @@ function startWebServer(cliArgs) {
       for (const ip of localIPs) {
         networkCount++;
         const spaces = networkCount !== 1 ? '           ' : '';
-        network.push(`${spaces}${BEIGE}http://${ip}:${HTTP_PORT}${RESET}\n`);
+        const protocol = USE_HTTPS ? 'https' : 'http';
+        network.push(`${spaces}${BEIGE}${protocol}://${ip}:${HTTP_PORT}${RESET}\n`);
       }
     }
     console.log(`\n${network.join('')} `);
@@ -1295,13 +3524,17 @@ function startWebServer(cliArgs) {
     console.log(`     ${CYAN}Home:${RESET} ${BEIGE}${homedir()}${RESET}`);
 
     console.log('');
-    console.log(`           ${DIM}Press ctrl+c to stop.${RESET}\n`);
+    if (backgroundMode) {
+      console.log(`           ${DIM}Run gt stop to stop.${RESET}\n`);
+    } else {
+      console.log(`           ${DIM}Press ctrl+c to stop.${RESET}\n`);
+    }
   }
 
   process.on('SIGINT', () => {
     console.log('\n\nShutting down...');
-    for (const [ws, session] of sessions.entries()) {
-      session.pty.kill();
+    for (const [ws, conn] of wsConnections.entries()) {
+      conn.pty.kill();
       ws.close();
     }
     wss.close();
@@ -1314,7 +3547,7 @@ function startWebServer(cliArgs) {
       const imagePath = path.join(__dirname, '..', 'bin', 'assets', 'ghosts.png');
       if (fs.existsSync(imagePath)) {
         // Welcome text with orange/yellow color (bright yellow, bold)
-        console.log('\n       \x1b[1;93mWelcome to Ghosttown!\x1b[0m\n');
+        console.log('\n       \x1b[1;93mWelcome to Ghost Town!\x1b[0m\n');
         const art = await asciiArt(imagePath, { maxWidth: 80, maxHeight: 20 });
         console.log(art);
         console.log('');
@@ -1324,7 +3557,8 @@ function startWebServer(cliArgs) {
       // This allows the server to start even if the image is missing
     }
 
-    printBanner(`http://localhost:${HTTP_PORT}`);
+    const protocol = USE_HTTPS ? 'https' : 'http';
+    printBanner(`${protocol}://localhost:${HTTP_PORT}`, backgroundMode);
   });
 }
 
@@ -1341,7 +3575,7 @@ export function run(argv) {
 
   // If a command is provided, create a tmux session instead of starting server
   if (cliArgs.command) {
-    createTmuxSession(cliArgs.command);
+    createTmuxSession(cliArgs.command, cliArgs.sessionName);
     // createTmuxSession spawns tmux attach and waits for it to exit
     // The script will exit when tmux attach exits (via the exit handler)
     // We must not continue to server code, so we stop here