@seflless/ghosttown 1.6.1 → 1.7.0

package/src/cli.js

@@ -50,6 +50,24 @@ import pty from '@lydell/node-pty';
 import { WebSocketServer } from 'ws';
 // ASCII art generator
 import { asciiArt } from '../bin/ascii.js';
+// Session name utilities
+import { displayNameExists, findSession, validateSessionName } from './session-utils.js';
+// Session management - custom PTY session manager (replaces tmux)
+import { SessionManager } from './session/session-manager.ts';
+
+// Global SessionManager instance (lazy-initialized)
+let sessionManager = null;
+
+/**
+ * Get or create the SessionManager instance
+ */
+async function getSessionManager() {
+  if (!sessionManager) {
+    sessionManager = new SessionManager();
+    await sessionManager.init();
+  }
+  return sessionManager;
+}
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -69,6 +87,10 @@ const SERVER_SESSION_NAME = 'ghosttown-host';
 // Session expiration: 3 days in milliseconds
 const SESSION_EXPIRATION_MS = 3 * 24 * 60 * 60 * 1000;
 
+// Session persistence file path
+const SESSION_FILE_DIR = path.join(homedir(), '.config', 'ghosttown');
+const SESSION_FILE_PATH = path.join(SESSION_FILE_DIR, 'sessions.json');
+
 // In-memory session store: Map<token, { username, createdAt, lastActivity }>
 const authSessions = new Map();
 
@@ -228,15 +250,74 @@ async function authenticateUser(username, password) {
 setInterval(
   () => {
     const now = Date.now();
+    let deleted = false;
     for (const [token, session] of authSessions.entries()) {
       if (now - session.createdAt > SESSION_EXPIRATION_MS) {
         authSessions.delete(token);
+        deleted = true;
       }
     }
+    if (deleted) {
+      saveSessions();
+    }
   },
   60 * 60 * 1000
 ); // Clean up every hour
 
+// Load sessions from persistent storage
+function loadSessions() {
+  try {
+    if (!fs.existsSync(SESSION_FILE_PATH)) {
+      return;
+    }
+    const data = fs.readFileSync(SESSION_FILE_PATH, 'utf8');
+    const sessions = JSON.parse(data);
+    const now = Date.now();
+
+    // Load valid sessions, skip expired ones
+    for (const [token, session] of Object.entries(sessions)) {
+      if (
+        session &&
+        typeof session.username === 'string' &&
+        typeof session.createdAt === 'number' &&
+        now - session.createdAt <= SESSION_EXPIRATION_MS
+      ) {
+        authSessions.set(token, {
+          username: session.username,
+          createdAt: session.createdAt,
+          lastActivity: session.lastActivity || session.createdAt,
+        });
+      }
+    }
+  } catch (err) {
+    // If file is corrupted or unreadable, start fresh
+    console.warn('Warning: Could not load sessions file, starting fresh:', err.message);
+  }
+}
+
+// Save sessions to persistent storage
+function saveSessions() {
+  try {
+    // Ensure directory exists with secure permissions
+    if (!fs.existsSync(SESSION_FILE_DIR)) {
+      fs.mkdirSync(SESSION_FILE_DIR, { recursive: true, mode: 0o700 });
+    }
+
+    // Convert Map to object for JSON serialization
+    const sessions = {};
+    for (const [token, session] of authSessions.entries()) {
+      sessions[token] = session;
+    }
+
+    // Write file with secure permissions (owner read/write only)
+    fs.writeFileSync(SESSION_FILE_PATH, JSON.stringify(sessions, null, 2), {
+      mode: 0o600,
+    });
+  } catch (err) {
+    console.error('Error saving sessions:', err.message);
+  }
+}
+
 // Helper to read POST body
 function readBody(req) {
   return new Promise((resolve, reject) => {
@@ -359,40 +440,43 @@ function isInsideGhosttownSession() {
   return sessionName && sessionName.startsWith('gt-');
 }
 
+// Note: validateSessionName and displayNameExists are imported from session-utils.js
+// CLI uses getTmuxSessionsForValidation() to adapt tmux sessions to the expected format
+// Web server uses SessionManager directly
+
 /**
- * Validate a session name
- * Returns { valid: true } or { valid: false, error: string }
+ * Parse a ghosttown tmux session name into its components.
+ * Format: gt-<stable-id>-<display-name>
+ * DEPRECATED: Only used by legacy CLI commands that still use tmux
+ *
+ * @param {string} fullName - The full tmux session name
+ * @returns {{ stableId: string|null, displayName: string, fullName: string }|null}
  */
-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" };
+function parseSessionName(fullName) {
+  if (!fullName || !fullName.startsWith('gt-')) {
+    return null;
   }
-  // tmux session names cannot contain: colon, period
-  // We also disallow spaces and special chars for URL safety
-  if (!/^[a-zA-Z0-9_-]+$/.test(name)) {
+  // Format: gt-<stable-id>-<display-name>
+  const match = fullName.match(/^gt-(\d+)-(.+)$/);
+  if (match) {
     return {
-      valid: false,
-      error: 'Session name can only contain letters, numbers, hyphens, and underscores',
+      stableId: match[1],
+      displayName: match[2],
+      fullName: fullName,
     };
   }
-  return { valid: true };
+  // Legacy format: gt-<name> (no stable ID)
+  const legacyName = fullName.slice(3);
+  return {
+    stableId: null,
+    displayName: legacyName,
+    fullName: fullName,
+  };
 }
 
 /**
  * Check if a tmux session with the given name exists
+ * DEPRECATED: Only used by legacy CLI commands that still use tmux
  */
 function sessionExists(sessionName) {
   try {
@@ -410,10 +494,11 @@ function sessionExists(sessionName) {
 }
 
 /**
- * Check if a display name is already used by a ghosttown session
- * Display name is the user-facing part after gt-<id>-
+ * Get tmux sessions in a format compatible with displayNameExists().
+ * Returns array of objects with displayName property.
+ * DEPRECATED: Only used by legacy CLI commands that still use tmux
  */
-function displayNameExists(displayName) {
+function getTmuxSessionsForValidation() {
   try {
     const output = execSync('tmux list-sessions -F "#{session_name}"', {
       encoding: 'utf8',
@@ -421,61 +506,54 @@ function displayNameExists(displayName) {
     });
     return output
       .split('\n')
-      .filter((s) => s.trim())
-      .some((name) => {
+      .filter((name) => name.startsWith('gt-'))
+      .map((name) => {
         const parsed = parseSessionName(name);
-        return parsed && parsed.displayName === displayName;
+        return { displayName: parsed ? parsed.displayName : name.replace('gt-', '') };
       });
   } catch (err) {
-    return false;
+    return [];
   }
 }
 
 /**
- * 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,
-  };
-}
-
-/**
- * Find a ghosttown session by its stable ID
- * Returns the full session name or null if not found
+ * Find a tmux session by display name or stableId.
+ * Used by CLI commands (attach, rename, kill) that interact with tmux sessions.
+ *
+ * @param {string} identifier - Display name or stableId to search for
+ * @returns {{ displayName: string, stableId: string|null, fullName: string }|null}
  */
-function findSessionByStableId(stableId) {
+function findSessionByDisplayName(identifier) {
   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;
-      }
+
+    const sessions = output
+      .split('\n')
+      .filter((name) => name.startsWith('gt-') && name !== SERVER_SESSION_NAME)
+      .map((fullName) => {
+        const parsed = parseSessionName(fullName);
+        return {
+          displayName: parsed ? parsed.displayName : fullName.replace('gt-', ''),
+          stableId: parsed ? parsed.stableId : null,
+          fullName,
+        };
+      });
+
+    // Try exact display name match first
+    const byName = sessions.find((s) => s.displayName === identifier);
+    if (byName) {
+      return byName;
     }
+
+    // Try stableId match (for backwards compatibility)
+    const byId = sessions.find((s) => s.stableId === identifier);
+    if (byId) {
+      return byId;
+    }
+
     return null;
   } catch (err) {
     return null;
@@ -511,6 +589,39 @@ function getNextDisplayNumber() {
   }
 }
 
+/**
+ * Create a new bare tmux session for the web UI
+ * @returns {{ displayNumber: number, stableId: string }} The display number and stable ID of the created session
+ * @throws {Error} If session creation fails
+ */
+function createWebSession() {
+  const displayNumber = getNextDisplayNumber();
+
+  // Create a detached session with a temporary name, get the 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 (must be done before sending keys)
+  execSync(`tmux set-option -t ${sessionName} status off`, { stdio: 'pipe' });
+
+  // Export environment variables for proper Unicode/color support
+  const envExports =
+    'export TERM=xterm-256color LANG=en_US.UTF-8 LC_ALL=en_US.UTF-8 COLORTERM=truecolor TERM_PROGRAM=ghostty';
+  execSync(`tmux send-keys -t ${sessionName} '${envExports}' Enter`, { stdio: 'pipe' });
+
+  return { displayNumber, stableId };
+}
+
 /**
  * Check if the background server is running and get its port and protocol
  * @returns {{ running: boolean, port: number | null, useHttp: boolean }}
@@ -670,7 +781,7 @@ function createTmuxSession(command, customName = null) {
       process.exit(1);
     }
     // Check if display name already exists
-    if (displayNameExists(customName)) {
+    if (displayNameExists(getTmuxSessionsForValidation(), customName)) {
       console.log('');
       console.log(`   ${RED}Error:${RESET} Session '${customName}' already exists.`);
       console.log('');
@@ -683,6 +794,7 @@ function createTmuxSession(command, customName = null) {
 
   try {
     // Create a detached session with a temporary name to get its stable ID
+    // This also starts the tmux server if not running
     const tempName = `gt-temp-${Date.now()}`;
     const output = execSync(
       `tmux new-session -d -s ${tempName} -x 200 -y 50 -P -F "#{session_id}"`,
@@ -699,9 +811,12 @@ function createTmuxSession(command, customName = null) {
     // Set status off
     execSync(`tmux set-option -t ${sessionName} status off`, { stdio: 'pipe' });
 
-    // Send the command to run, followed by shell
+    // Export environment variables for proper Unicode/color support, then run the command
+    // Include TERM to override tmux's default
+    const envExports =
+      'export TERM=xterm-256color LANG=en_US.UTF-8 LC_ALL=en_US.UTF-8 COLORTERM=truecolor TERM_PROGRAM=ghostty';
     execSync(
-      `tmux send-keys -t ${sessionName} '${command.replace(/'/g, "'\\''")}; exec $SHELL' Enter`,
+      `tmux send-keys -t ${sessionName} '${envExports} && ${command.replace(/'/g, "'\\''")}; exec $SHELL' Enter`,
       { stdio: 'pipe' }
     );
 
@@ -837,32 +952,13 @@ function attachToSession(sessionName) {
   const RED = '\x1b[31m';
   const BEIGE = '\x1b[38;2;255;220;150m';
 
-  // Add gt- prefix if not present
-  if (!sessionName.startsWith('gt-')) {
-    sessionName = `gt-${sessionName}`;
-  }
-
-  // Check if session exists
-  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());
-    if (!sessions.includes(sessionName)) {
-      console.log('');
-      console.log(`   ${RED}Error:${RESET} Session '${sessionName}' not found.`);
-      console.log('');
-      console.log(`   ${BEIGE}No ghosttown sessions are currently running.${RESET}`);
-      console.log('');
-      process.exit(1);
-    }
-  } catch (err) {
+  // Look up session by display name
+  const found = findSessionByDisplayName(sessionName);
+  if (!found) {
     console.log('');
-    console.log(`   ${RED}Error:${RESET} No tmux sessions found.`);
+    console.log(`   ${RED}Error:${RESET} Session '${sessionName}' not found.`);
     console.log('');
-    console.log(`   ${BEIGE}No ghosttown sessions are currently running.${RESET}`);
+    listSessionsInline();
     console.log('');
     process.exit(1);
   }
@@ -871,7 +967,7 @@ function attachToSession(sessionName) {
   // Use the same pattern as detachFromTmux which works
   const result = spawnSync(
     process.env.SHELL || '/bin/sh',
-    ['-c', `tmux attach-session -t ${sessionName}`],
+    ['-c', `tmux attach-session -t ${found.fullName}`],
     {
       stdio: 'inherit',
     }
@@ -987,57 +1083,57 @@ function killSession(sessionName) {
     }
 
     sessionName = getCurrentTmuxSessionName();
-  }
-
-  // Add gt- prefix if not present
-  if (!sessionName.startsWith('gt-')) {
-    sessionName = `gt-${sessionName}`;
-  }
+    // sessionName is now the full tmux name (e.g., gt-12-13)
+    const parsed = parseSessionName(sessionName);
 
-  // Check if session exists
-  try {
-    const output = execSync('tmux list-sessions -F "#{session_name}"', {
-      encoding: 'utf8',
-      stdio: ['pipe', 'pipe', 'pipe'],
-    });
+    // Kill the session
+    try {
+      execSync(`tmux kill-session -t ${sessionName}`, {
+        stdio: 'pipe',
+      });
 
-    const sessions = output.split('\n').filter((s) => s.trim());
-    if (!sessions.includes(sessionName)) {
+      const displayName = parsed ? parsed.displayName : sessionName.replace('gt-', '');
       console.log('');
-      console.log(`   ${RED}Error:${RESET} Session '${sessionName}' not found.`);
+      console.log(`   ${BOLD_YELLOW}Session ${displayName} has been killed.${RESET}`);
       console.log('');
-      console.log(`   ${BEIGE}No ghosttown sessions are currently running.${RESET}`);
+      console.log(`   ${CYAN}To list remaining:${RESET}  ${BEIGE}gt list${RESET}`);
+      console.log('');
+      process.exit(0);
+    } catch (err) {
+      const displayName = parsed ? parsed.displayName : sessionName.replace('gt-', '');
+      console.log('');
+      console.log(`   ${RED}Error:${RESET} Failed to kill session '${displayName}'.`);
       console.log('');
       process.exit(1);
     }
-  } catch (err) {
+  }
+
+  // User provided a session name - look it up by display name
+  const found = findSessionByDisplayName(sessionName);
+  if (!found) {
     console.log('');
-    console.log(`   ${RED}Error:${RESET} No tmux sessions found.`);
+    console.log(`   ${RED}Error:${RESET} Session '${sessionName}' not found.`);
     console.log('');
-    console.log(`   ${BEIGE}No ghosttown sessions are currently running.${RESET}`);
+    listSessionsInline();
     console.log('');
     process.exit(1);
   }
 
   // Kill the session
   try {
-    execSync(`tmux kill-session -t ${sessionName}`, {
+    execSync(`tmux kill-session -t ${found.fullName}`, {
       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 ${displayName} has been killed.${RESET}`);
+    console.log(`   ${BOLD_YELLOW}Session ${found.displayName} has been killed.${RESET}`);
     console.log('');
     console.log(`   ${CYAN}To list remaining:${RESET}  ${BEIGE}gt list${RESET}`);
     console.log('');
     process.exit(0);
   } catch (err) {
     console.log('');
-    console.log(`   ${RED}Error:${RESET} Failed to kill session '${sessionName}'.`);
+    console.log(`   ${RED}Error:${RESET} Failed to kill session '${found.displayName}'.`);
     console.log('');
     process.exit(1);
   }
@@ -1153,6 +1249,7 @@ function startServerInBackground(port = 8080, useHttp = false) {
     const gtPath = process.argv[1];
 
     // Create a detached tmux session for the server
+    // This also starts the tmux server if not running
     execSync(`tmux new-session -d -s ${SERVER_SESSION_NAME} -x 200 -y 50`, {
       stdio: 'pipe',
     });
@@ -1174,9 +1271,12 @@ function startServerInBackground(port = 8080, useHttp = false) {
     execSync(`tmux set-option -t ${SERVER_SESSION_NAME} status off`, { stdio: 'pipe' });
 
     // Run the server with background mode flag (add --http if needed)
+    // Export environment variables for proper Unicode/color support first
     const httpFlag = useHttp ? ' --http' : '';
+    const envExports =
+      'export TERM=xterm-256color LANG=en_US.UTF-8 LC_ALL=en_US.UTF-8 COLORTERM=truecolor TERM_PROGRAM=ghostty';
     execSync(
-      `tmux send-keys -t ${SERVER_SESSION_NAME} 'node "${gtPath}" --server-background -p ${port}${httpFlag}' Enter`,
+      `tmux send-keys -t ${SERVER_SESSION_NAME} '${envExports} && node "${gtPath}" --server-background -p ${port}${httpFlag}' Enter`,
       { stdio: 'pipe' }
     );
 
@@ -1338,29 +1438,6 @@ function listSessionsInline() {
   }
 }
 
-/**
- * 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:
@@ -1436,7 +1513,7 @@ function renameSession(renameArgs) {
   }
 
   // Check new display name doesn't conflict
-  if (displayNameExists(newDisplayName)) {
+  if (displayNameExists(getTmuxSessionsForValidation(), newDisplayName)) {
     console.log('');
     console.log(`   ${RED}Error:${RESET} Session '${newDisplayName}' already exists.`);
     console.log('');
@@ -1474,6 +1551,7 @@ function parseArgs(argv) {
   let handled = false;
   let sessionName = null;
   let useHttp = false;
+  let noAuth = false;
   let serverBackgroundMode = false;
 
   for (let i = 0; i < args.length; i++) {
@@ -1487,6 +1565,7 @@ 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)
+  --no-auth            Disable authentication (binds to localhost only)
   -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
@@ -1511,6 +1590,8 @@ Examples:
   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 --no-auth                      Disable auth (localhost only, for testing)
+  ghosttown --http --no-auth               HTTP without auth (for local testing)
   ghosttown list                           List all ghosttown sessions
   ghosttown attach 1                       Attach to session gt-1
   ghosttown attach my-project              Attach to session gt-my-project
@@ -1564,8 +1645,7 @@ Aliases:
       if (!sessionArg) {
         console.error('Error: attach requires a session name or ID');
         console.error('Usage: gt attach <name|id>');
-        handled = true;
-        break;
+        process.exit(1);
       }
       handled = true;
       attachToSession(sessionArg);
@@ -1671,6 +1751,11 @@ Aliases:
       useHttp = true;
     }
 
+    // Handle no-auth flag (disables authentication, binds to localhost only)
+    else if (arg === '--no-auth') {
+      noAuth = true;
+    }
+
     // First non-flag argument starts the command
     // Capture it and all remaining arguments as the command
     else if (!arg.startsWith('-')) {
@@ -1679,7 +1764,7 @@ Aliases:
     }
   }
 
-  return { port, command, handled, sessionName, useHttp, serverBackgroundMode };
+  return { port, command, handled, sessionName, useHttp, noAuth, serverBackgroundMode };
 }
 
 // ============================================================================
@@ -1689,7 +1774,13 @@ Aliases:
 function startWebServer(cliArgs) {
   const HTTP_PORT = cliArgs.port || process.env.PORT || 8080;
   const USE_HTTPS = !cliArgs.useHttp;
+  const NO_AUTH = cliArgs.noAuth || false;
   const backgroundMode = cliArgs.serverBackgroundMode || false;
+  // When auth is disabled, only bind to localhost for security
+  const BIND_ADDRESS = NO_AUTH ? '127.0.0.1' : '0.0.0.0';
+
+  // Load persisted sessions from disk
+  loadSessions();
 
   // Generate self-signed certificate for HTTPS
   function generateSelfSignedCert() {
@@ -1765,7 +1856,11 @@ function startWebServer(cliArgs) {
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
-    <title>ghosttown</title>
+    <title>Ghost Town</title>
+    <!-- JetBrains Mono for consistent terminal rendering -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
     <style>
       :root {
         --vvh: 100vh;
@@ -1790,7 +1885,7 @@ function startWebServer(cliArgs) {
 
       body {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        background: #292c34;
+        background: #1a1a1a;
         padding: 8px 8px 14px 8px;
         box-sizing: border-box;
         position: fixed;
@@ -1806,6 +1901,7 @@ function startWebServer(cliArgs) {
         justify-content: center;
         align-items: center;
         padding: 8px;
+        caret-color: transparent;
         box-sizing: border-box;
       }
 
@@ -1814,69 +1910,129 @@ function startWebServer(cliArgs) {
       }
 
       .session-card {
-        background: #1e2127;
+        background: #252525;
         border-radius: 12px;
-        padding: 24px;
+        padding: 16px 20px;
         width: 100%;
         max-width: 600px;
+        max-height: calc(100vh - 48px);
         box-sizing: border-box;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      #session-list-content {
+        flex: 1;
+        overflow-y: auto;
+        min-height: 0;
+      }
+
+      #session-list-content::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      #session-list-content::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      #session-list-content::-webkit-scrollbar-thumb {
+        background: #3a3f48;
+        border-radius: 4px;
+      }
+
+      #session-list-content::-webkit-scrollbar-thumb:hover {
+        background: #4a4f58;
       }
 
       .session-card h1 {
         color: #e5e5e5;
-        font-size: 24px;
+        font-size: 22px;
         font-weight: 600;
-        margin-bottom: 20px;
+        margin-bottom: 4px;
         text-align: center;
       }
 
-      .session-table {
-        width: 100%;
-        border-collapse: collapse;
-        margin-bottom: 20px;
+      .session-card .subtitle {
+        color: #888;
+        font-size: 13px;
+        font-weight: 400;
+        margin-bottom: 16px;
+        text-align: center;
       }
 
-      .session-table th {
+      .session-table-header {
+        display: flex;
         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;
+        flex-shrink: 0;
+      }
+
+      .session-table-header .header-name {
+        width: 90px;
+        flex-shrink: 0;
+      }
+
+      .session-table-header .header-activity {
+        flex: 1;
       }
 
-      .session-table td {
+      .session-table-header .header-status {
+        width: 100px;
+        flex-shrink: 0;
+      }
+
+      .session-table-header .header-actions {
+        width: 68px;
+        flex-shrink: 0;
+      }
+
+      .session-row {
+        display: flex;
+        align-items: center;
         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 {
+      .session-row:hover {
         background: #2a2f38;
       }
 
-      .session-table tr.session-row td {
-        padding: 0;
-      }
-
-      .session-table tr.session-row td a {
-        display: block;
+      .session-row a {
+        display: flex;
+        flex: 1;
+        align-items: center;
         padding: 12px;
         color: inherit;
         text-decoration: none;
       }
 
-      .session-table tr.session-row td.actions-cell {
+      .session-row .row-name {
+        width: 90px;
+        flex-shrink: 0;
+      }
+
+      .session-row .row-activity {
+        flex: 1;
+      }
+
+      .session-row .row-status {
+        width: 100px;
+        flex-shrink: 0;
+      }
+
+      .session-row .actions-cell {
+        width: 68px;
+        flex-shrink: 0;
         padding: 12px 8px;
-        width: 40px;
       }
 
       .copy-btn {
@@ -1892,31 +2048,37 @@ function startWebServer(cliArgs) {
       }
 
       .copy-btn:hover {
-        background: #3a3f48;
+        background: #2a2f38;
+        border-color: #8a8f98;
         color: #fff;
       }
 
+      .copy-btn:focus {
+        outline: 2px solid #d97757;
+        outline-offset: 2px;
+      }
+
       .copy-btn.copied {
-        color: #4ade80;
-        border-color: #4ade80;
+        color: #3fb68b;
+        border-color: #3fb68b;
       }
 
       .session-status {
         display: inline-block;
-        padding: 2px 8px;
+        padding: 4px 10px;
         border-radius: 4px;
-        font-size: 11px;
-        font-weight: 500;
+        font-size: 12px;
+        font-weight: 400;
+        background: #1e1e1e;
+        border: 1px solid #333333;
       }
 
       .session-status.connected {
-        background: rgba(39, 201, 63, 0.2);
-        color: #27c93f;
+        color: #3fb68b;
       }
 
       .session-status.disconnected {
-        background: rgba(255, 189, 46, 0.2);
-        color: #ffbd2e;
+        color: #d9a557;
       }
 
       .empty-state {
@@ -1931,21 +2093,30 @@ function startWebServer(cliArgs) {
       }
 
       .create-btn {
-        background: #3a7afe;
-        color: white;
-        border: none;
+        background: transparent;
+        color: #d97757;
+        border: 1px solid #3a3f48;
         padding: 10px 20px;
         border-radius: 6px;
         font-size: 14px;
-        font-weight: 500;
+        font-weight: 400;
         cursor: pointer;
-        transition: background 0.15s;
+        transition: all 0.15s;
         display: block;
         width: 100%;
+        text-decoration: none;
+        text-align: center;
+        box-sizing: border-box;
       }
 
       .create-btn:hover {
-        background: #2563eb;
+        background: #2a2f38;
+        border-color: #d97757;
+      }
+
+      .create-btn:focus {
+        outline: 2px solid #d97757;
+        outline-offset: 2px;
       }
 
       .button-row {
@@ -1964,16 +2135,22 @@ function startWebServer(cliArgs) {
         padding: 10px 16px;
         border-radius: 6px;
         font-size: 14px;
-        font-weight: 500;
+        font-weight: 400;
         cursor: pointer;
         transition: all 0.15s;
       }
 
       .logout-btn:hover {
-        background: #3a3f48;
+        background: #2a2f38;
+        border-color: #888;
         color: #fff;
       }
 
+      .logout-btn:focus {
+        outline: 2px solid #d97757;
+        outline-offset: 2px;
+      }
+
       .error-message {
         background: rgba(255, 95, 86, 0.1);
         border: 1px solid rgba(255, 95, 86, 0.3);
@@ -2019,7 +2196,7 @@ function startWebServer(cliArgs) {
       }
 
       .title-bar {
-        background: #292c34;
+        background: #1a1a1a;
         padding: 8px 16px 6px 10px;
         display: flex;
         align-items: center;
@@ -2077,6 +2254,26 @@ function startWebServer(cliArgs) {
         color: #e5e5e5;
       }
 
+      .new-terminal-btn {
+        color: #888;
+        font-size: 18px;
+        font-weight: bold;
+        text-decoration: none;
+        width: 28px;
+        height: 28px;
+        display: grid;
+        place-items: center;
+        border-radius: 6px;
+        margin-left: 12px;
+        padding-bottom: 3px;
+        box-sizing: border-box;
+        transition: background 0.15s, color 0.15s;
+      }
+      .new-terminal-btn:hover {
+        background: #3a4049;
+        color: #e5e5e5;
+      }
+
       .connection-status {
         margin-left: auto;
         font-size: 11px;
@@ -2098,7 +2295,7 @@ function startWebServer(cliArgs) {
       #terminal-container {
         flex: 1;
         padding: 2px 0 2px 2px;
-        background: #292c34;
+        background: #1a1a1a;
         position: relative;
         overflow: hidden;
         min-height: 0;
@@ -2152,7 +2349,7 @@ function startWebServer(cliArgs) {
         margin-top: 16px;
         padding: 8px 24px;
         background: #27c93f;
-        color: #1e2127;
+        color: #ffffff;
         border: none;
         border-radius: 6px;
         font-size: 14px;
@@ -2165,12 +2362,19 @@ function startWebServer(cliArgs) {
     <div class="session-list-view" id="session-list-view">
       <div class="session-card">
         <h1>Ghost Town</h1>
+        <p class="subtitle">Choose a terminal to connect to</p>
         <div class="error-message" id="error-message"></div>
+        <div class="session-table-header" id="session-table-header" style="display: none;">
+          <span class="header-name">Name</span>
+          <span class="header-activity">Last Activity</span>
+          <span class="header-status">Status</span>
+          <span class="header-actions"></span>
+        </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>
+          <a href="/new" class="create-btn">Create Session</a>
           <button class="logout-btn" id="logout-btn">Logout</button>
         </div>
       </div>
@@ -2195,6 +2399,7 @@ function startWebServer(cliArgs) {
             <span class="connection-dot" id="connection-dot"></span>
             <span id="connection-text">Disconnected</span>
           </div>
+          <a href="/new" class="new-terminal-btn" title="New Terminal">+</a>
         </div>
         <div id="terminal-container"></div>
         <div class="connection-error-overlay" id="connection-error">
@@ -2217,6 +2422,7 @@ function startWebServer(cliArgs) {
       let ws;
       let fitAddon;
       let currentSessionName = null;
+      let requestedSessionName = null; // Original name from URL (for error messages)
 
       // HTML escape to prevent XSS when inserting user data into templates
       function escapeHtml(str) {
@@ -2229,13 +2435,15 @@ function startWebServer(cliArgs) {
       }
 
       // Get session info from URL query parameters
-      // Returns { name, stableId } or null
+      // Returns { sessionId, name, stableId } or null
+      // Supports both new (?sessionId=uuid) and legacy (?session=name&id=stableId) formats
       function getSessionFromUrl() {
         const params = new URLSearchParams(window.location.search);
+        const sessionId = params.get('sessionId');
         const name = params.get('session');
         const stableId = params.get('id');
-        if (name || stableId) {
-          return { name, stableId };
+        if (sessionId || name || stableId) {
+          return { sessionId, name, stableId };
         }
         return null;
       }
@@ -2244,11 +2452,17 @@ function startWebServer(cliArgs) {
       async function initApp() {
         const sessionInfo = getSessionFromUrl();
 
-        if (sessionInfo && sessionInfo.stableId) {
-          // Show terminal view using stable ID
+        if (sessionInfo && sessionInfo.sessionId) {
+          // New format: use UUID sessionId
+          requestedSessionName = sessionInfo.name || sessionInfo.sessionId;
+          showTerminalView(sessionInfo.sessionId);
+        } else if (sessionInfo && sessionInfo.stableId) {
+          // Legacy format: use stable ID
+          requestedSessionName = sessionInfo.name;
           showTerminalView(sessionInfo.stableId);
         } else if (sessionInfo && sessionInfo.name) {
           // Legacy URL with just name - show terminal view
+          requestedSessionName = sessionInfo.name;
           showTerminalView(sessionInfo.name);
         } else {
           // Show session list view
@@ -2258,15 +2472,23 @@ function startWebServer(cliArgs) {
 
       // Show session list view
       async function showSessionListView() {
+        // Disable contenteditable on terminal container to prevent caret from appearing
+        const termContainer = document.getElementById('terminal-container');
+        if (termContainer) {
+          termContainer.setAttribute('contenteditable', 'false');
+        }
+
+        // Blur any focused element
+        if (document.activeElement) {
+          document.activeElement.blur();
+        }
+
         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;
       }
@@ -2288,14 +2510,17 @@ function startWebServer(cliArgs) {
           const data = await response.json();
 
           const content = document.getElementById('session-list-content');
+          const header = document.getElementById('session-table-header');
 
           if (data.sessions.length === 0) {
+            header.style.display = 'none';
             content.innerHTML = \`
               <div class="empty-state">
                 <p>No sessions yet</p>
               </div>
             \`;
           } else {
+            header.style.display = 'flex';
             const rows = data.sessions.map(session => {
               const lastActivity = new Date(session.lastActivity).toLocaleString();
               const statusClass = session.attached ? 'connected' : 'disconnected';
@@ -2303,30 +2528,18 @@ function startWebServer(cliArgs) {
               // 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>
+                <div class="session-row">
+                  <a href="\${sessionUrl}">
+                    <span class="row-name">\${escapeHtml(session.name)}</span>
+                    <span class="row-activity">\${lastActivity}</span>
+                    <span class="row-status"><span class="session-status \${statusClass}">\${statusText}</span></span>
+                  </a>
+                  <div class="actions-cell"><button class="copy-btn" onclick="copySessionUrl(event, '\${escapeHtml(session.name)}', '\${escapeHtml(session.stableId || '')}')" title="Copy URL">Copy</button></div>
+                </div>
               \`;
             }).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>
-            \`;
+            content.innerHTML = rows;
           }
         } catch (err) {
           console.error('Failed to fetch sessions:', err);
@@ -2354,19 +2567,6 @@ function startWebServer(cliArgs) {
         });
       };
 
-      // 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');
@@ -2380,6 +2580,12 @@ function startWebServer(cliArgs) {
         currentSessionName = sessionId; // Will be updated when session_info arrives
         document.getElementById('session-list-view').classList.remove('active');
         document.getElementById('terminal-view').classList.add('active');
+
+        // Re-enable contenteditable on terminal container (it's disabled when showing session list)
+        const termContainer = document.getElementById('terminal-container');
+        if (termContainer) {
+          termContainer.setAttribute('contenteditable', 'true');
+        }
         // Show loading state until we get the real name from session_info
         document.getElementById('session-name').textContent = 'Loading...';
         document.title = 'ghosttown';
@@ -2421,10 +2627,28 @@ function startWebServer(cliArgs) {
         term = new Terminal({
           cursorBlink: true,
           fontSize: 12,
-          fontFamily: 'Monaco, Menlo, "Courier New", monospace',
+          fontFamily: '"JetBrains Mono", Monaco, Menlo, "Courier New", monospace',
           theme: {
-            background: '#292c34',
+            // Claude Code-inspired terminal colors
+            background: '#1e1e1e',
             foreground: '#d4d4d4',
+            cursor: '#d4d4d4',
+            black: '#000000',
+            red: '#c94a4a',
+            green: '#3fb68b',
+            yellow: '#d9a557',
+            blue: '#5794d9',
+            magenta: '#b56ec9',
+            cyan: '#4ab5c9',
+            white: '#d4d4d4',
+            brightBlack: '#555555',
+            brightRed: '#e57373',
+            brightGreen: '#5ed4a5',
+            brightYellow: '#e5c07b',
+            brightBlue: '#7ab0e5',
+            brightMagenta: '#d099e5',
+            brightCyan: '#6fd4e5',
+            brightWhite: '#ffffff',
           },
           smoothScrollDuration: 0,
           scrollback: 10000,
@@ -2589,7 +2813,10 @@ function startWebServer(cliArgs) {
 
       // SSE connection (for mobile with self-signed certs)
       function connectSSE() {
-        const sseUrl = '/sse?cols=' + term.cols + '&rows=' + term.rows + '&session=' + encodeURIComponent(currentSessionName);
+        let sseUrl = '/sse?cols=' + term.cols + '&rows=' + term.rows + '&session=' + encodeURIComponent(currentSessionName);
+        if (requestedSessionName && requestedSessionName !== currentSessionName) {
+          sseUrl += '&name=' + encodeURIComponent(requestedSessionName);
+        }
 
         sseSource = new EventSource(sseUrl);
 
@@ -2678,7 +2905,10 @@ function startWebServer(cliArgs) {
       // 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 + '&session=' + encodeURIComponent(currentSessionName);
+        let wsUrl = protocol + '//' + window.location.host + '/ws?cols=' + term.cols + '&rows=' + term.rows + '&session=' + encodeURIComponent(currentSessionName);
+        if (requestedSessionName && requestedSessionName !== currentSessionName) {
+          wsUrl += '&name=' + encodeURIComponent(requestedSessionName);
+        }
 
         ws = new WebSocket(wsUrl);
 
@@ -2748,7 +2978,7 @@ function startWebServer(cliArgs) {
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>login - ghosttown</title>
+    <title>Login - Ghost Town</title>
     <style>
       * {
         margin: 0;
@@ -2758,7 +2988,7 @@ function startWebServer(cliArgs) {
 
       body {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        background: #292c34;
+        background: #1a1a1a;
         min-height: 100vh;
         display: flex;
         align-items: center;
@@ -2769,14 +2999,14 @@ function startWebServer(cliArgs) {
       .login-window {
         width: 100%;
         max-width: 400px;
-        background: #1e2127;
+        background: #252525;
         border-radius: 12px;
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
         overflow: hidden;
       }
 
       .title-bar {
-        background: #292c34;
+        background: #1a1a1a;
         padding: 12px 16px;
         display: flex;
         align-items: center;
@@ -2843,27 +3073,27 @@ function startWebServer(cliArgs) {
       .form-group input {
         width: 100%;
         padding: 12px 14px;
-        background: #292c34;
-        border: 1px solid #3d3d3d;
+        background: transparent;
+        border: 1px solid #3a3f48;
         border-radius: 6px;
-        color: #e5e5e5;
+        color: #d4d4d4;
         font-size: 14px;
-        transition: border-color 0.2s;
+        transition: all 0.2s;
       }
 
       .form-group input:focus {
-        outline: none;
-        border-color: #27c93f;
+        outline: 2px solid #d97757;
+        outline-offset: 2px;
       }
 
       .form-group input::placeholder {
-        color: #666;
+        color: #666666;
       }
 
       .error-message {
-        background: rgba(255, 95, 86, 0.1);
-        border: 1px solid rgba(255, 95, 86, 0.3);
-        color: #ff5f56;
+        background: rgba(201, 74, 74, 0.15);
+        border: 1px solid rgba(201, 74, 74, 0.3);
+        color: #e57373;
         padding: 12px;
         border-radius: 6px;
         font-size: 13px;
@@ -2878,30 +3108,37 @@ function startWebServer(cliArgs) {
       .submit-btn {
         width: 100%;
         padding: 14px;
-        background: #27c93f;
-        border: none;
+        background: transparent;
+        border: 1px solid #3a3f48;
         border-radius: 6px;
-        color: #1e1e1e;
+        color: #d97757;
         font-size: 14px;
-        font-weight: 600;
+        font-weight: 400;
         cursor: pointer;
-        transition: background 0.2s;
+        transition: all 0.2s;
       }
 
       .submit-btn:hover {
-        background: #2bd946;
+        background: #2a2f38;
+        border-color: #d97757;
+      }
+
+      .submit-btn:focus {
+        outline: 2px solid #d97757;
+        outline-offset: 2px;
       }
 
       .submit-btn:disabled {
-        background: #3d3d3d;
-        color: #888;
+        background: transparent;
+        border-color: #252525;
+        color: #555555;
         cursor: not-allowed;
       }
 
       .hint {
         text-align: center;
         margin-top: 20px;
-        color: #666;
+        color: #666666;
         font-size: 12px;
       }
     </style>
@@ -3027,7 +3264,8 @@ function startWebServer(cliArgs) {
     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);
+    // When NO_AUTH is enabled, treat all requests as authenticated
+    const session = NO_AUTH ? { username: 'local' } : validateAuthSession(cookies.ghostty_session);
 
     // Handle login API endpoint
     if (pathname === '/api/login' && req.method === 'POST') {
@@ -3062,6 +3300,7 @@ function startWebServer(cliArgs) {
             createdAt: now,
             lastActivity: now,
           });
+          saveSessions();
 
           setAuthCookieSecure(res, token);
           res.writeHead(200, { 'Content-Type': 'application/json' });
@@ -3082,6 +3321,7 @@ function startWebServer(cliArgs) {
     if (pathname === '/api/logout' && req.method === 'POST') {
       if (cookies.ghostty_session) {
         authSessions.delete(cookies.ghostty_session);
+        saveSessions();
       }
       clearAuthCookie(res);
       res.writeHead(200, { 'Content-Type': 'application/json' });
@@ -3096,6 +3336,32 @@ function startWebServer(cliArgs) {
       return;
     }
 
+    // Handle /new - create new session and redirect
+    if (pathname === '/new') {
+      if (!session) {
+        res.writeHead(302, { Location: '/login' });
+        res.end();
+        return;
+      }
+      (async () => {
+        try {
+          const manager = await getSessionManager();
+          // Create session without starting PTY - it will start on first WebSocket connect
+          const newSession = await manager.createSession({ startProcess: false });
+          // Use sessionId for new format, keep session param for backward compat
+          res.writeHead(302, {
+            Location: `/?sessionId=${newSession.id}&session=${encodeURIComponent(newSession.displayName)}`,
+          });
+          res.end();
+        } catch (err) {
+          console.error('Failed to create session:', err);
+          res.writeHead(500, { 'Content-Type': 'text/plain' });
+          res.end('Failed to create session');
+        }
+      })();
+      return;
+    }
+
     // Serve index page (requires authentication)
     if (pathname === '/' || pathname === '/index.html') {
       if (!session) {
@@ -3131,7 +3397,7 @@ function startWebServer(cliArgs) {
       return;
     }
 
-    // API: List sessions (from tmux) - requires authentication
+    // API: List sessions - requires authentication
     if (pathname === '/api/sessions' && req.method === 'GET') {
       if (!session) {
         res.writeHead(401, { 'Content-Type': 'application/json' });
@@ -3139,40 +3405,31 @@ function startWebServer(cliArgs) {
         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),
-            };
-          });
+        const manager = await getSessionManager();
+        const sessionList = await manager.listSessions();
+
+        // Map to API response format with backward-compatible fields
+        const response = sessionList.map((s) => ({
+          name: s.displayName,
+          stableId: s.id.slice(0, 8), // Short ID for backward compat
+          id: s.id, // Full UUID (new)
+          lastActivity: s.lastActivity,
+          attached: s.connectionCount > 0, // Backward compat: attached means has connections
+          isRunning: s.isRunning,
+          connectionCount: s.connectionCount,
+        }));
 
-        // 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 }));
+        res.end(JSON.stringify({ sessions: response }));
       } catch (err) {
-        // No tmux sessions or tmux not running
+        console.error('Error listing sessions:', err);
         res.writeHead(200, { 'Content-Type': 'application/json' });
         res.end(JSON.stringify({ sessions: [] }));
       }
       return;
     }
 
-    // API: Create session (tmux session) - requires authentication
+    // API: Create session - requires authentication
     if (pathname === '/api/sessions/create' && req.method === 'POST') {
       if (!session) {
         res.writeHead(401, { 'Content-Type': 'application/json' });
@@ -3180,28 +3437,18 @@ function startWebServer(cliArgs) {
         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' });
-
+        const manager = await getSessionManager();
+        const newSession = await manager.createSession();
         res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ name: String(displayNumber), stableId: stableId }));
+        res.end(
+          JSON.stringify({
+            name: newSession.displayName,
+            stableId: newSession.id.slice(0, 8), // Short ID for backward compat
+            id: newSession.id, // Full UUID (new)
+          })
+        );
       } catch (err) {
+        console.error('Error creating session:', err);
         res.writeHead(500, { 'Content-Type': 'application/json' });
         res.end(JSON.stringify({ error: 'Failed to create session' }));
       }
@@ -3218,77 +3465,123 @@ function startWebServer(cliArgs) {
 
       const cols = Number.parseInt(url.searchParams.get('cols') || '80');
       const rows = Number.parseInt(url.searchParams.get('rows') || '24');
-      const requestedSession = url.searchParams.get('session');
+      // Support both new (sessionId) and legacy (session) parameters
+      const sessionIdParam = url.searchParams.get('sessionId');
+      const legacySession = url.searchParams.get('session');
+      const requestedName = url.searchParams.get('name');
+      const identifier = sessionIdParam || legacySession;
 
-      if (!requestedSession) {
+      if (!identifier) {
         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;
-      }
+      try {
+        const manager = await getSessionManager();
+
+        // Look up session by UUID, short ID, or display name
+        const sessionObj = await findSessionForWeb(identifier);
+        if (!sessionObj) {
+          let errorMsg;
+          if (requestedName && requestedName !== identifier) {
+            errorMsg = `No session found named ${requestedName}, or with id ${identifier}`;
+          } else {
+            errorMsg = `No session found named ${identifier} or with id ${identifier}`;
+          }
+          res.writeHead(404, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ error: errorMsg }));
+          return;
+        }
 
-      // Generate unique connection ID
-      const connectionId = `sse-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        // 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,
-      });
+        // Set up SSE headers first
+        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`
-      );
+        // Send session info as first event
+        res.write(
+          `data: ${JSON.stringify({ type: 'session_info', name: sessionObj.displayName, stableId: sessionObj.id.slice(0, 8), id: sessionObj.id, connectionId })}\n\n`
+        );
 
-      // Create PTY attached to tmux session
-      const ptyProcess = createTmuxAttachPty(sessionInfo.fullName, cols, rows);
+        // Timeout for closing connection after session exit (30 seconds)
+        const SSE_EXIT_TIMEOUT_MS = 30000;
+        let exitTimeout = null;
+
+        // Set up event handlers BEFORE connecting (to catch early output like shell prompt)
+        const outputHandler = (sid, data) => {
+          if (sid === sessionObj.id && !res.writableEnded) {
+            // Clear exit timeout if session produces output (it restarted)
+            if (exitTimeout) {
+              clearTimeout(exitTimeout);
+              exitTimeout = null;
+            }
+            const encoded = Buffer.from(data).toString('base64');
+            res.write(`data: ${JSON.stringify({ type: 'output', data: encoded })}\n\n`);
+          }
+        };
 
-      // Store connection
-      sseConnections.set(connectionId, {
-        res,
-        pty: ptyProcess,
-        stableId: requestedSession,
-        sessionInfo,
-      });
+        const exitHandler = (sid) => {
+          if (sid === sessionObj.id && !res.writableEnded) {
+            res.write(`data: ${JSON.stringify({ type: 'exit' })}\n\n`);
+            // Set timeout to close connection if session doesn't restart
+            exitTimeout = setTimeout(() => {
+              if (!res.writableEnded) {
+                res.write(
+                  `data: ${JSON.stringify({ type: 'timeout', message: 'Session exited and did not restart' })}\n\n`
+                );
+                res.end();
+                const conn = sseConnections.get(connectionId);
+                if (conn) {
+                  manager.off('session:output', conn.outputHandler);
+                  manager.off('session:exit', conn.exitHandler);
+                  sseConnections.delete(connectionId);
+                }
+              }
+            }, SSE_EXIT_TIMEOUT_MS);
+          }
+        };
 
-      // 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`);
-        }
-      });
+        manager.on('session:output', outputHandler);
+        manager.on('session:exit', exitHandler);
 
-      ptyProcess.onExit(() => {
-        if (!res.writableEnded) {
-          res.write(`data: ${JSON.stringify({ type: 'exit' })}\n\n`);
-          res.end();
-        }
-        sseConnections.delete(connectionId);
-      });
+        // Store connection
+        sseConnections.set(connectionId, {
+          res,
+          sessionId: sessionObj.id,
+          outputHandler,
+          exitHandler,
+          exitTimeout: () => exitTimeout, // Getter for cleanup
+        });
 
-      // Handle client disconnect
-      req.on('close', () => {
-        const conn = sseConnections.get(connectionId);
-        if (conn) {
-          conn.pty.kill();
-          sseConnections.delete(connectionId);
-        }
-      });
+        // Connect to session (respawns PTY if needed) - after handlers are set up
+        await manager.connectToSession(sessionObj.id);
+        await manager.resizeSession(sessionObj.id, cols, rows);
+
+        // Handle client disconnect
+        req.on('close', () => {
+          const conn = sseConnections.get(connectionId);
+          if (conn) {
+            // Clear any pending exit timeout
+            const timeout = conn.exitTimeout?.();
+            if (timeout) clearTimeout(timeout);
+            manager.off('session:output', conn.outputHandler);
+            manager.off('session:exit', conn.exitHandler);
+            sseConnections.delete(connectionId);
+            // Note: We do NOT kill the PTY - session persists for reconnection
+          }
+        });
+      } catch (err) {
+        console.error('SSE connection error:', err);
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: err.message }));
+      }
 
       return;
     }
@@ -3305,7 +3598,7 @@ function startWebServer(cliArgs) {
       req.on('data', (chunk) => {
         body += chunk;
       });
-      req.on('end', () => {
+      req.on('end', async () => {
         try {
           const { connectionId, data, type, cols, rows } = JSON.parse(body);
 
@@ -3316,12 +3609,14 @@ function startWebServer(cliArgs) {
             return;
           }
 
+          const manager = await getSessionManager();
+
           if (type === 'resize' && cols && rows) {
-            conn.pty.resize(cols, rows);
+            await manager.resizeSession(conn.sessionId, cols, rows);
           } else if (data) {
             // Decode base64 input
             const decoded = Buffer.from(data, 'base64').toString('utf8');
-            conn.pty.write(decoded);
+            manager.write(conn.sessionId, decoded);
           }
 
           res.writeHead(200, { 'Content-Type': 'application/json' });
@@ -3358,54 +3653,35 @@ function startWebServer(cliArgs) {
   // WebSocket Server
   // ============================================================================
 
-  // Track active WebSocket connections to tmux sessions
-  // ws -> { pty, sessionName }
+  // Track active WebSocket connections to sessions
+  // ws -> { sessionId, outputHandler, exitHandler }
   const wsConnections = new Map();
 
   // Track active SSE connections (fallback for mobile)
-  // connectionId -> { res, pty, stableId, sessionInfo }
+  // connectionId -> { res, sessionId, outputHandler, exitHandler }
   const sseConnections = new Map();
 
   /**
-   * Find a ghosttown session by stable ID (for web connections)
-   * Returns { fullName, displayName, stableId } or null if not found
+   * Find a session by various identifiers (UUID, short ID, or display name)
+   * Returns session object 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;
-    }
-  }
+  async function findSessionForWeb(identifier) {
+    const manager = await getSessionManager();
+    const sessions = await manager.listSessions();
 
-  /**
-   * 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,
-      cwd: homedir(),
-      env: {
-        ...process.env,
-        TERM: 'xterm-256color',
-        COLORTERM: 'truecolor',
-      },
-    });
+    // Try exact UUID match first
+    let session = sessions.find((s) => s.id === identifier);
+    if (session) return manager.getSession(session.id);
+
+    // Try short ID prefix match
+    session = sessions.find((s) => s.id.startsWith(identifier));
+    if (session) return manager.getSession(session.id);
+
+    // Try display name match
+    session = sessions.find((s) => s.displayName === identifier);
+    if (session) return manager.getSession(session.id);
 
-    return ptyProcess;
+    return null;
   }
 
   const wss = new WebSocketServer({ noServer: true });
@@ -3414,9 +3690,11 @@ function startWebServer(cliArgs) {
     const url = new URL(req.url, `http://${req.headers.host}`);
 
     if (url.pathname === '/ws') {
-      // Validate authentication before allowing WebSocket connection
+      // Validate authentication before allowing WebSocket connection (skip if NO_AUTH)
       const cookies = parseCookies(req.headers.cookie);
-      const session = validateAuthSession(cookies.ghostty_session);
+      const session = NO_AUTH
+        ? { username: 'local' }
+        : validateAuthSession(cookies.ghostty_session);
 
       if (!session) {
         // Reject unauthenticated WebSocket connections
@@ -3434,93 +3712,130 @@ function startWebServer(cliArgs) {
     }
   });
 
-  wss.on('connection', (ws, req) => {
+  wss.on('connection', async (ws, req) => {
     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) {
+    // Support both new (sessionId) and legacy (session) parameters
+    const sessionId = url.searchParams.get('sessionId');
+    const legacySession = url.searchParams.get('session');
+    const requestedName = url.searchParams.get('name'); // Original name from URL (if different from session)
+    const identifier = sessionId || legacySession;
+
+    // Session parameter is required
+    if (!identifier) {
       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;
-    }
+    try {
+      const manager = await getSessionManager();
 
-    // Create a PTY that attaches to the tmux session
-    const ptyProcess = createTmuxAttachPty(sessionInfo.fullName, cols, rows);
+      // Look up session by UUID, short ID, or display name
+      const session = await findSessionForWeb(identifier);
 
-    wsConnections.set(ws, { pty: ptyProcess, stableId: requestedSession, sessionInfo });
+      if (!session) {
+        // Build error message with both name and id if available
+        let errorMsg;
+        if (requestedName && requestedName !== identifier) {
+          errorMsg = `No session found named ${requestedName}, or with id ${identifier}`;
+        } else {
+          errorMsg = `No session found named ${identifier} or with id ${identifier}`;
+        }
+        ws.send(JSON.stringify({ type: 'error', message: errorMsg }));
+        ws.close();
+        return;
+      }
 
-    // Send session info with current display name (may have been renamed)
-    ws.send(
-      JSON.stringify({
-        type: 'session_info',
-        name: sessionInfo.displayName,
-        stableId: sessionInfo.stableId,
-      })
-    );
+      // Set up event handlers BEFORE connecting (to catch early output like shell prompt)
+      const outputHandler = (sid, data) => {
+        if (sid === session.id && ws.readyState === ws.OPEN) {
+          ws.send(data);
+        }
+      };
 
-    ptyProcess.onData((data) => {
-      if (ws.readyState === ws.OPEN) {
-        ws.send(data);
-      }
-    });
+      const exitHandler = (sid) => {
+        if (sid === session.id && ws.readyState === ws.OPEN) {
+          ws.send(JSON.stringify({ type: 'session_exit' }));
+          // Don't close - allow reconnect
+        }
+      };
 
-    ptyProcess.onExit(() => {
-      if (ws.readyState === ws.OPEN) {
-        ws.close();
+      manager.on('session:output', outputHandler);
+      manager.on('session:exit', exitHandler);
+
+      wsConnections.set(ws, { sessionId: session.id, outputHandler, exitHandler });
+
+      // Connect to session (respawns PTY if needed after server restart)
+      await manager.connectToSession(session.id);
+
+      // Resize to requested dimensions
+      await manager.resizeSession(session.id, cols, rows);
+
+      // Send session info with current display name
+      ws.send(
+        JSON.stringify({
+          type: 'session_info',
+          name: session.displayName,
+          stableId: session.id.slice(0, 8), // Backward compat
+          id: session.id, // Full UUID (new)
+        })
+      );
+
+      // Replay scrollback buffer for reconnecting clients
+      const scrollback = await manager.getScrollback(session.id);
+      if (scrollback) {
+        ws.send(scrollback);
       }
-      wsConnections.delete(ws);
-    });
 
-    ws.on('message', (data) => {
-      const message = data.toString('utf8');
+      ws.on('message', (data) => {
+        const message = data.toString('utf8');
 
-      if (message.startsWith('{')) {
-        try {
-          const msg = JSON.parse(message);
-          if (msg.type === 'resize') {
-            ptyProcess.resize(msg.cols, msg.rows);
-            return;
+        if (message.startsWith('{')) {
+          try {
+            const msg = JSON.parse(message);
+            if (msg.type === 'resize') {
+              manager.resizeSession(session.id, msg.cols, msg.rows);
+              return;
+            }
+          } catch (e) {
+            // Not JSON, treat as input
           }
-        } catch (e) {
-          // Not JSON, treat as input
         }
-      }
 
-      ptyProcess.write(message);
-    });
+        // Write to PTY
+        try {
+          manager.write(session.id, message);
+        } catch {
+          // PTY may have exited, that's ok
+        }
+      });
 
-    ws.on('close', () => {
-      const conn = wsConnections.get(ws);
-      if (conn) {
-        conn.pty.kill();
-        wsConnections.delete(ws);
-      }
-    });
+      ws.on('close', () => {
+        const conn = wsConnections.get(ws);
+        if (conn) {
+          manager.off('session:output', conn.outputHandler);
+          manager.off('session:exit', conn.exitHandler);
+          wsConnections.delete(ws);
+          // Note: We do NOT kill the PTY - session persists for reconnection
+        }
+      });
 
-    ws.on('error', () => {
-      const conn = wsConnections.get(ws);
-      if (conn) {
-        conn.pty.kill();
-        wsConnections.delete(ws);
-      }
-    });
+      ws.on('error', () => {
+        const conn = wsConnections.get(ws);
+        if (conn) {
+          manager.off('session:output', conn.outputHandler);
+          manager.off('session:exit', conn.exitHandler);
+          wsConnections.delete(ws);
+        }
+      });
+    } catch (err) {
+      console.error('WebSocket connection error:', err);
+      ws.send(JSON.stringify({ type: 'error', message: err.message }));
+      ws.close();
+    }
   });
 
   // ============================================================================
@@ -3579,7 +3894,7 @@ function startWebServer(cliArgs) {
     process.exit(0);
   });
 
-  httpServer.listen(HTTP_PORT, '0.0.0.0', async () => {
+  httpServer.listen(HTTP_PORT, BIND_ADDRESS, async () => {
     // Display ASCII art banner
     try {
       const imagePath = path.join(__dirname, '..', 'bin', 'assets', 'ghosts.png');
@@ -3597,6 +3912,11 @@ function startWebServer(cliArgs) {
 
     const protocol = USE_HTTPS ? 'https' : 'http';
     printBanner(`${protocol}://localhost:${HTTP_PORT}`, backgroundMode);
+
+    // Show warning when auth is disabled
+    if (NO_AUTH) {
+      console.log('  \x1b[33m⚠ Auth disabled\x1b[0m - localhost only, for testing\n');
+    }
   });
 }