termites 1.0.2 → 1.0.4

package/.termites.json

@@ -0,0 +1,4 @@
+{
+  "passwordHash": "c24b1a8a39097744476af90309f1c765dc9fc1b7ee9d55e124d8533dea50f00f",
+  "sessionToken": "db7c768a5beddd2da037f3feff5c0322481e66e71b459f40c3cee20323a255ce"
+}

package/bin/termites.js

@@ -9,17 +9,21 @@ function showHelp() {
 Termites - Web terminal with server-client architecture
 
 Usage:
-  termites server              Start the server
+  termites server [options]    Start the server
   termites client [url]        Connect to a server
 
-Options:
+Server Options:
+  --no-client                  Don't start local client (default: starts client)
+
+Environment:
   PORT=<port>                  Set server port (default: 6789)
 
 Examples:
-  termites server              Start server on port 6789
-  PORT=8080 termites server    Start server on port 8080
+  termites server              Start server with local client
+  termites server --no-client  Start server only
+  PORT=8080 termites server    Start on port 8080
   termites client              Connect to ws://localhost:6789
-  termites client 192.168.1.100:6789
+  termites client myserver     Connect to ws://myserver:6789
 `);
 }
 
@@ -31,9 +35,23 @@ if (!command || command === '-h' || command === '--help' || command === 'help')
 const rootDir = path.join(__dirname, '..');
 
 if (command === 'server') {
+    const noClient = args.includes('--no-client');
+    const startClient = !noClient;
+
+    // Set environment variable for server to know whether to start client
+    process.env.START_CLIENT = startClient ? 'true' : 'false';
+
     require(path.join(rootDir, 'server.js'));
 } else if (command === 'client') {
-    const serverUrl = args[1] || 'ws://localhost:6789';
+    let serverUrl = args[1] || 'ws://localhost:6789';
+    // Add ws:// prefix if missing
+    if (!serverUrl.startsWith('ws://') && !serverUrl.startsWith('wss://')) {
+        serverUrl = 'ws://' + serverUrl;
+    }
+    // Add default port if not specified
+    if (!serverUrl.match(/:\d+/)) {
+        serverUrl = serverUrl.replace(/^(wss?:\/\/[^\/]+)/, '$1:6789');
+    }
     process.argv = [process.argv[0], path.join(rootDir, 'client.js'), serverUrl];
     require(path.join(rootDir, 'client.js'));
 } else {

package/client.js

@@ -13,7 +13,7 @@ function getSystemInfo() {
     return { username, hostname, cwd, platform };
 }
 
-class WebShellClient {
+class TermitesClient {
     constructor(serverUrl) {
         this.serverUrl = serverUrl.endsWith('/client') ? serverUrl : serverUrl + '/client';
         this.ws = null;
@@ -26,12 +26,12 @@ class WebShellClient {
     }
 
     connect() {
-        console.log(`连接服务器: ${this.serverUrl}`);
+        console.log(`Connecting to server: ${this.serverUrl}`);
 
         this.ws = new WebSocket(this.serverUrl);
 
         this.ws.on('open', () => {
-            console.log('已连接到服务器');
+            console.log('Connected to server');
             this.reconnectDelay = 1000;
 
             // Register with server
@@ -49,23 +49,23 @@ class WebShellClient {
                 const data = JSON.parse(message);
                 this.handleServerMessage(data);
             } catch (e) {
-                console.error('解析服务器消息失败:', e);
+                console.error('Failed to parse server message:', e);
             }
         });
 
         this.ws.on('close', () => {
-            console.log('与服务器断开连接');
+            console.log('Disconnected from server');
             this.stopShell();
             this.scheduleReconnect();
         });
 
         this.ws.on('error', (err) => {
-            console.error('WebSocket 错误:', err.message);
+            console.error('WebSocket error:', err.message);
         });
     }
 
     scheduleReconnect() {
-        console.log(`${this.reconnectDelay / 1000} 秒后重连...`);
+        console.log(`Reconnecting in ${this.reconnectDelay / 1000}s...`);
         setTimeout(() => {
             this.reconnectDelay = Math.min(this.reconnectDelay * 2, this.maxReconnectDelay);
             this.connect();
@@ -100,7 +100,7 @@ class WebShellClient {
             env: process.env
         });
 
-        console.log(`Shell 已启动 (PID: ${this.pty.pid})`);
+        console.log(`Shell started (PID: ${this.pty.pid})`);
 
         this.pty.onData((data) => {
             if (this.ws && this.ws.readyState === WebSocket.OPEN) {
@@ -112,7 +112,7 @@ class WebShellClient {
         });
 
         this.pty.onExit(() => {
-            console.log('Shell 已退出');
+            console.log('Shell exited');
             if (this.ws && this.ws.readyState === WebSocket.OPEN) {
                 this.ws.send(JSON.stringify({ type: 'exit' }));
             }
@@ -135,12 +135,16 @@ let serverUrl = SERVER_URL;
 if (!serverUrl.startsWith('ws://') && !serverUrl.startsWith('wss://')) {
     serverUrl = 'ws://' + serverUrl;
 }
+// Add default port if not specified
+if (!serverUrl.match(/:\d+/) && !serverUrl.includes('localhost')) {
+    serverUrl = serverUrl.replace(/^(wss?:\/\/[^\/]+)/, '$1:6789');
+}
 
-console.log('WebShell Client');
-console.log(`系统信息: ${getSystemInfo().username}@${getSystemInfo().hostname}`);
+console.log('Termites Client');
+console.log(`System: ${getSystemInfo().username}@${getSystemInfo().hostname}`);
 console.log(`Shell: ${SHELL}`);
 
-new WebShellClient(serverUrl);
+new TermitesClient(serverUrl);
 
 process.on('SIGINT', () => process.exit(0));
 process.on('SIGTERM', () => process.exit(0));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "termites",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Web terminal with server-client architecture for remote shell access",
   "main": "index.js",
   "scripts": {

package/server.js

@@ -2,15 +2,49 @@
 const http = require('http');
 const WebSocket = require('ws');
 const crypto = require('crypto');
+const { spawn } = require('child_process');
+const path = require('path');
+const fs = require('fs');
 
 const PORT = process.env.PORT || 6789;
+const START_CLIENT = process.env.START_CLIENT !== 'false'; // default true
+const CONFIG_FILE = path.join(__dirname, '.termites.json');
 
-class WebShellServer {
+// Load or create config
+function loadConfig() {
+    try {
+        if (fs.existsSync(CONFIG_FILE)) {
+            return JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf8'));
+        }
+    } catch (e) {}
+    return { passwordHash: null };
+}
+
+function saveConfig(config) {
+    fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2));
+}
+
+function hashPassword(password) {
+    return crypto.createHash('sha256').update(password).digest('hex');
+}
+
+class TermitesServer {
     constructor(port) {
         this.port = port;
         this.clients = new Map(); // clientId -> { ws, info, outputBuffer }
         this.browsers = new Set(); // browser WebSocket connections
         this.selectedClient = null; // currently selected client for each browser
+        this.config = loadConfig();
+        // Use saved sessionToken or generate new one
+        if (this.config.passwordHash) {
+            if (!this.config.sessionToken) {
+                this.config.sessionToken = crypto.randomBytes(32).toString('hex');
+                saveConfig(this.config);
+            }
+            this.sessionToken = this.config.sessionToken;
+        } else {
+            this.sessionToken = null;
+        }
 
         this.startServer();
     }
@@ -24,6 +58,14 @@ class WebShellServer {
 
         this.wss.on('connection', (ws, req) => {
             const isClient = req.url === '/client';
+            console.log(`WebSocket connection: ${req.url}, isClient: ${isClient}`);
+
+            // Browser connections require auth (if password is set)
+            if (!isClient && this.config.passwordHash && !this.checkSession(req)) {
+                console.log('WebSocket rejected: unauthorized browser connection');
+                ws.close(1008, 'Unauthorized');
+                return;
+            }
 
             if (isClient) {
                 this.handleClientConnection(ws);
@@ -33,15 +75,64 @@ class WebShellServer {
         });
 
         this.httpServer.listen(this.port, () => {
-            console.log(`WebShell Server 启动: http://localhost:${this.port}`);
-            console.log(`客户端连接地址: ws://localhost:${this.port}/client`);
+            console.log(`Termites Server started: http://localhost:${this.port}`);
+            console.log(`Client connection: ws://localhost:${this.port}/client`);
+            if (!this.config.passwordHash) {
+                console.log('Warning: No password set, please visit browser to set password');
+            }
+
+            // Auto-start local client if enabled
+            if (START_CLIENT) {
+                this.startLocalClient();
+            }
+        });
+    }
+
+    checkSession(req) {
+        const cookies = this.parseCookies(req.headers.cookie || '');
+        const valid = cookies.session === this.sessionToken;
+        if (!valid) {
+            console.log('Session check failed. Cookie:', req.headers.cookie ? 'present' : 'missing');
+            console.log('  Expected:', this.sessionToken?.substring(0, 16) + '...');
+            console.log('  Got:', cookies.session?.substring(0, 16) + '...');
+        }
+        return valid;
+    }
+
+    parseCookies(cookieStr) {
+        const cookies = {};
+        cookieStr.split(';').forEach(pair => {
+            const [key, val] = pair.trim().split('=');
+            if (key) cookies[key] = val;
+        });
+        return cookies;
+    }
+
+    startLocalClient() {
+        console.log('Starting local client...');
+        const clientPath = path.join(__dirname, 'client.js');
+        const serverUrl = `ws://localhost:${this.port}/client`;
+
+        this.localClient = spawn(process.execPath, [clientPath, serverUrl], {
+            stdio: 'inherit'
+        });
+        global.localClient = this.localClient;
+
+        this.localClient.on('error', (err) => {
+            console.error('Failed to start local client:', err.message);
+        });
+
+        this.localClient.on('exit', (code) => {
+            console.log(`Local client exited (code: ${code})`);
+            this.localClient = null;
+            global.localClient = null;
         });
     }
 
     // Handle shell client connections
     handleClientConnection(ws) {
         const clientId = crypto.randomUUID();
-        console.log(`新客户端连接: ${clientId}`);
+        console.log(`New client connected: ${clientId}`);
 
         const clientData = {
             ws,
@@ -55,12 +146,12 @@ class WebShellServer {
                 const data = JSON.parse(message);
                 this.handleClientMessage(clientId, data);
             } catch (e) {
-                console.error('解析客户端消息失败:', e);
+                console.error('Failed to parse client message:', e);
             }
         });
 
         ws.on('close', () => {
-            console.log(`客户端断开: ${clientId}`);
+            console.log(`Client disconnected: ${clientId}`);
             this.clients.delete(clientId);
             this.broadcastToBrowsers({
                 type: 'client-disconnected',
@@ -76,7 +167,7 @@ class WebShellServer {
         switch (data.type) {
             case 'register':
                 client.info = data.info;
-                console.log(`客户端注册: ${data.info.username}@${data.info.hostname}`);
+                console.log(`Client registered: ${data.info.username}@${data.info.hostname}`);
                 this.broadcastToBrowsers({
                     type: 'client-connected',
                     client: { id: clientId, ...data.info }
@@ -97,20 +188,23 @@ class WebShellServer {
                 break;
 
             case 'exit':
-                console.log(`客户端 shell 退出: ${clientId}`);
+                console.log(`Client shell exited: ${clientId}`);
                 break;
         }
     }
 
     // Handle browser connections
     handleBrowserConnection(ws) {
-        console.log('新浏览器连接');
+        console.log('New browser connected');
+        console.log('Current clients count:', this.clients.size);
         this.browsers.add(ws);
 
         // Send current client list
+        const clientList = this.getClientList();
+        console.log('Sending client list:', clientList.length, 'clients');
         ws.send(JSON.stringify({
             type: 'clients',
-            list: this.getClientList()
+            list: clientList
         }));
 
         ws.on('message', (message) => {
@@ -118,7 +212,7 @@ class WebShellServer {
                 const data = JSON.parse(message);
                 this.handleBrowserMessage(ws, data);
             } catch (e) {
-                console.error('解析浏览器消息失败:', e);
+                console.error('Failed to parse browser message:', e);
             }
         });
 
@@ -197,7 +291,84 @@ class WebShellServer {
     }
 
     handleHttpRequest(req, res) {
-        if (req.url === '/' || req.url === '/index.html') {
+        const url = req.url.split('?')[0];
+
+        // Setup password API
+        if (url === '/api/setup' && req.method === 'POST') {
+            let body = '';
+            req.on('data', chunk => body += chunk);
+            req.on('end', () => {
+                try {
+                    const { password } = JSON.parse(body);
+                    if (!password || password.length < 4) {
+                        res.writeHead(400, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ success: false, error: 'Password must be at least 4 characters' }));
+                        return;
+                    }
+                    // Only allow setup if no password exists
+                    if (this.config.passwordHash) {
+                        res.writeHead(403, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ success: false, error: 'Password already set' }));
+                        return;
+                    }
+                    this.config.passwordHash = hashPassword(password);
+                    this.config.sessionToken = crypto.randomBytes(32).toString('hex');
+                    this.sessionToken = this.config.sessionToken;
+                    saveConfig(this.config);
+                    console.log('Password has been set');
+                    res.writeHead(200, {
+                        'Content-Type': 'application/json',
+                        'Set-Cookie': `session=${this.sessionToken}; Path=/; HttpOnly; SameSite=Strict`
+                    });
+                    res.end(JSON.stringify({ success: true }));
+                } catch (e) {
+                    res.writeHead(400, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ success: false, error: 'Invalid request' }));
+                }
+            });
+            return;
+        }
+
+        // Login API
+        if (url === '/api/login' && req.method === 'POST') {
+            let body = '';
+            req.on('data', chunk => body += chunk);
+            req.on('end', () => {
+                try {
+                    const { password } = JSON.parse(body);
+                    if (hashPassword(password) === this.config.passwordHash) {
+                        res.writeHead(200, {
+                            'Content-Type': 'application/json',
+                            'Set-Cookie': `session=${this.sessionToken}; Path=/; HttpOnly; SameSite=Strict`
+                        });
+                        res.end(JSON.stringify({ success: true }));
+                    } else {
+                        res.writeHead(401, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ success: false, error: 'Wrong password' }));
+                    }
+                } catch (e) {
+                    res.writeHead(400, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ success: false, error: 'Invalid request' }));
+                }
+            });
+            return;
+        }
+
+        // No password set - show setup page
+        if (!this.config.passwordHash) {
+            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+            res.end(this.getSetupPage());
+            return;
+        }
+
+        // Check session for protected pages
+        if (!this.checkSession(req)) {
+            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+            res.end(this.getLoginPage());
+            return;
+        }
+
+        if (url === '/' || url === '/index.html') {
             res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
             res.end(this.getHtmlPage());
         } else {
@@ -206,13 +377,200 @@ class WebShellServer {
         }
     }
 
+    getSetupPage() {
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Termites - Setup</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            min-height: 100vh; display: flex; align-items: center; justify-content: center;
+            background: #1a1a2e; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
+        }
+        .setup-box {
+            background: #16213e; padding: 40px; border-radius: 12px; width: 360px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        h1 { color: #eee; margin-bottom: 12px; font-size: 20px; text-align: center; }
+        .subtitle { color: #888; font-size: 13px; text-align: center; margin-bottom: 30px; }
+        .input-group { margin-bottom: 20px; }
+        label { display: block; color: #888; margin-bottom: 8px; font-size: 13px; }
+        input[type="password"] {
+            width: 100%; padding: 12px 16px; border: 2px solid #2a2a4a; border-radius: 8px;
+            background: #0f0f23; color: #eee; font-size: 16px; outline: none;
+            transition: border-color 0.2s;
+        }
+        input[type="password"]:focus { border-color: #50fa7b; }
+        button {
+            width: 100%; padding: 14px; border: none; border-radius: 8px;
+            background: #50fa7b; color: #1a1a2e; font-size: 16px; font-weight: bold;
+            cursor: pointer; transition: background 0.2s;
+        }
+        button:hover { background: #69ff94; }
+        button:disabled { background: #555; color: #888; cursor: not-allowed; }
+        .error { color: #ff6b6b; font-size: 13px; margin-top: 12px; text-align: center; display: none; }
+    </style>
+</head>
+<body>
+    <div class="setup-box">
+        <h1>Termites Setup</h1>
+        <p class="subtitle">Set a password to protect your terminal</p>
+        <form id="setup-form">
+            <div class="input-group">
+                <label>Password</label>
+                <input type="password" id="password" placeholder="Enter password (min 4 chars)" autofocus>
+            </div>
+            <div class="input-group">
+                <label>Confirm Password</label>
+                <input type="password" id="confirm" placeholder="Confirm password">
+            </div>
+            <button type="submit">Set Password</button>
+            <div class="error" id="error"></div>
+        </form>
+    </div>
+    <script>
+        document.getElementById('setup-form').onsubmit = async (e) => {
+            e.preventDefault();
+            const btn = e.target.querySelector('button');
+            const error = document.getElementById('error');
+            const password = document.getElementById('password').value;
+            const confirm = document.getElementById('confirm').value;
+
+            error.style.display = 'none';
+
+            if (password.length < 4) {
+                error.textContent = 'Password must be at least 4 characters';
+                error.style.display = 'block';
+                return;
+            }
+            if (password !== confirm) {
+                error.textContent = 'Passwords do not match';
+                error.style.display = 'block';
+                return;
+            }
+
+            btn.disabled = true;
+            btn.textContent = 'Setting up...';
+
+            try {
+                const res = await fetch('/api/setup', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ password })
+                });
+                const data = await res.json();
+                if (data.success) {
+                    location.reload();
+                } else {
+                    error.textContent = data.error || 'Setup failed';
+                    error.style.display = 'block';
+                }
+            } catch (err) {
+                error.textContent = 'Network error';
+                error.style.display = 'block';
+            }
+            btn.disabled = false;
+            btn.textContent = 'Set Password';
+        };
+    </script>
+</body>
+</html>`;
+    }
+
+    getLoginPage() {
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Termites - Login</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            min-height: 100vh; display: flex; align-items: center; justify-content: center;
+            background: #1a1a2e; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
+        }
+        .login-box {
+            background: #16213e; padding: 40px; border-radius: 12px; width: 320px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        h1 { color: #eee; margin-bottom: 30px; font-size: 20px; text-align: center; }
+        .input-group { margin-bottom: 20px; }
+        label { display: block; color: #888; margin-bottom: 8px; font-size: 13px; }
+        input[type="password"] {
+            width: 100%; padding: 12px 16px; border: 2px solid #2a2a4a; border-radius: 8px;
+            background: #0f0f23; color: #eee; font-size: 16px; outline: none;
+            transition: border-color 0.2s;
+        }
+        input[type="password"]:focus { border-color: #e94560; }
+        button {
+            width: 100%; padding: 14px; border: none; border-radius: 8px;
+            background: #e94560; color: white; font-size: 16px; font-weight: bold;
+            cursor: pointer; transition: background 0.2s;
+        }
+        button:hover { background: #ff6b6b; }
+        button:disabled { background: #555; cursor: not-allowed; }
+        .error { color: #ff6b6b; font-size: 13px; margin-top: 12px; text-align: center; display: none; }
+    </style>
+</head>
+<body>
+    <div class="login-box">
+        <h1>Termites</h1>
+        <form id="login-form">
+            <div class="input-group">
+                <label>Password</label>
+                <input type="password" id="password" placeholder="Enter password" autofocus>
+            </div>
+            <button type="submit">Login</button>
+            <div class="error" id="error"></div>
+        </form>
+    </div>
+    <script>
+        document.getElementById('login-form').onsubmit = async (e) => {
+            e.preventDefault();
+            const btn = e.target.querySelector('button');
+            const error = document.getElementById('error');
+            const password = document.getElementById('password').value;
+
+            btn.disabled = true;
+            btn.textContent = 'Logging in...';
+            error.style.display = 'none';
+
+            try {
+                const res = await fetch('/api/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ password })
+                });
+                const data = await res.json();
+                if (data.success) {
+                    location.reload();
+                } else {
+                    error.textContent = data.error || 'Login failed';
+                    error.style.display = 'block';
+                }
+            } catch (err) {
+                error.textContent = 'Network error';
+                error.style.display = 'block';
+            }
+            btn.disabled = false;
+            btn.textContent = 'Login';
+        };
+    </script>
+</body>
+</html>`;
+    }
+
     getHtmlPage() {
         return `<!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>WebShell</title>
+    <title>Termites</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -272,21 +630,35 @@ class WebShellServer {
         .font-size-row input { flex: 1; }
         .font-size-row span { font-size: 12px; min-width: 36px; }
         .empty-clients { padding: 16px; font-size: 12px; opacity: 0.5; text-align: center; }
+        /* Mobile toolbar */
+        .mobile-toolbar {
+            display: none; flex-shrink: 0; padding: 6px 8px; gap: 6px;
+            border-bottom: 1px solid; overflow-x: auto; -webkit-overflow-scrolling: touch;
+        }
+        .mobile-toolbar.show { display: flex; }
+        .mobile-toolbar button {
+            flex-shrink: 0; padding: 8px 12px; border: 1px solid; border-radius: 6px;
+            background: transparent; color: inherit; font-size: 12px; font-family: monospace;
+            cursor: pointer; transition: all 0.15s; min-width: 44px;
+        }
+        .mobile-toolbar button:active { opacity: 0.6; transform: scale(0.95); }
+        .mobile-toolbar button.active { background: var(--btn-active, rgba(255,255,255,0.15)); }
+        .mobile-toolbar .sep { width: 1px; background: currentColor; opacity: 0.2; margin: 0 4px; }
     </style>
 </head>
 <body>
     <div class="overlay" id="overlay"></div>
     <div class="drawer" id="drawer">
         <div class="drawer-header">
-            <h3>WebShell</h3>
+            <h3>Termites</h3>
             <button class="drawer-close" id="drawer-close">&times;</button>
         </div>
         <div class="drawer-content">
             <div class="drawer-section">
-                <div class="drawer-section-header">⚙ 设置</div>
+                <div class="drawer-section-header">⚙ Settings</div>
                 <div class="settings-section">
                     <div class="setting-group">
-                        <label>主题</label>
+                        <label>Theme</label>
                         <select id="theme-select">
                             <option value="solarized-light">Solarized Light</option>
                             <option value="solarized-dark">Solarized Dark</option>
@@ -297,7 +669,7 @@ class WebShellServer {
                         </select>
                     </div>
                     <div class="setting-group">
-                        <label>字体</label>
+                        <label>Font</label>
                         <select id="font-select">
                             <option value="Monaco, Menlo, monospace">Monaco</option>
                             <option value="'Fira Code', monospace">Fira Code</option>
@@ -307,25 +679,48 @@ class WebShellServer {
                         </select>
                     </div>
                     <div class="setting-group">
-                        <label>字体大小</label>
+                        <label>Font Size</label>
                         <div class="font-size-row">
                             <input type="range" id="font-size" min="10" max="24" value="14">
                             <span id="font-size-value">14px</span>
                         </div>
                     </div>
+                    <div class="setting-group">
+                        <label>Toolbar</label>
+                        <select id="toolbar-select">
+                            <option value="auto">Auto (detect mobile)</option>
+                            <option value="show">Always show</option>
+                            <option value="hide">Always hide</option>
+                        </select>
+                    </div>
                 </div>
             </div>
             <div class="drawer-section">
-                <div class="drawer-section-header">◉ 客户端</div>
+                <div class="drawer-section-header">◉ Clients</div>
                 <div class="client-list" id="client-list">
-                    <div class="empty-clients">等待客户端连接...</div>
+                    <div class="empty-clients">Waiting for clients...</div>
                 </div>
             </div>
         </div>
     </div>
     <div class="header">
         <button class="menu-btn" id="menu-btn"><span></span><span></span><span></span></button>
-        <div class="header-title" id="header-title"><span class="no-client">未连接</span></div>
+        <div class="header-title" id="header-title"><span class="no-client">Not connected</span></div>
+    </div>
+    <div class="mobile-toolbar" id="mobile-toolbar">
+        <button data-key="Escape">Esc</button>
+        <button data-key="Tab">Tab</button>
+        <button data-mod="ctrl" class="mod-btn">Ctrl</button>
+        <button data-mod="alt" class="mod-btn">Alt</button>
+        <div class="sep"></div>
+        <button data-key="ArrowUp">↑</button>
+        <button data-key="ArrowDown">↓</button>
+        <button data-key="ArrowLeft">←</button>
+        <button data-key="ArrowRight">→</button>
+        <div class="sep"></div>
+        <button data-seq="\\x03">^C</button>
+        <button data-seq="\\x04">^D</button>
+        <button data-seq="\\x1a">^Z</button>
     </div>
     <div id="terminal-container"></div>
 
@@ -414,6 +809,8 @@ class WebShellServer {
         let currentTheme = 'solarized-light';
         let currentFont = 'Monaco, Menlo, monospace';
         let currentFontSize = 14;
+        let currentToolbar = 'auto';
+        let modifiers = { ctrl: false, alt: false };
 
         function loadSettings() {
             const saved = localStorage.getItem('webshell-settings');
@@ -422,16 +819,18 @@ class WebShellServer {
                 currentTheme = s.theme || currentTheme;
                 currentFont = s.font || currentFont;
                 currentFontSize = s.fontSize || currentFontSize;
+                currentToolbar = s.toolbar || currentToolbar;
             }
             document.getElementById('theme-select').value = currentTheme;
             document.getElementById('font-select').value = currentFont;
             document.getElementById('font-size').value = currentFontSize;
             document.getElementById('font-size-value').textContent = currentFontSize + 'px';
+            document.getElementById('toolbar-select').value = currentToolbar;
         }
 
         function saveSettings() {
             localStorage.setItem('webshell-settings', JSON.stringify({
-                theme: currentTheme, font: currentFont, fontSize: currentFontSize
+                theme: currentTheme, font: currentFont, fontSize: currentFontSize, toolbar: currentToolbar
             }));
         }
 
@@ -450,6 +849,10 @@ class WebShellServer {
             drawer.style.color = t.foreground;
             document.querySelectorAll('.drawer-section').forEach(el => el.style.borderColor = t.headerBorder);
             document.querySelector('.drawer-header').style.borderColor = t.headerBorder;
+            const toolbar = document.getElementById('mobile-toolbar');
+            toolbar.style.background = t.headerBg;
+            toolbar.style.borderColor = t.headerBorder;
+            toolbar.style.color = t.foreground;
             const style = document.documentElement.style;
             style.setProperty('--user-color', t.userColor);
             style.setProperty('--host-color', t.hostColor);
@@ -480,6 +883,38 @@ class WebShellServer {
             saveSettings();
         }
 
+        function applyToolbar(value) {
+            currentToolbar = value;
+            updateToolbarVisibility();
+            saveSettings();
+            if (term) fitAddon.fit();
+        }
+
+        function updateToolbarVisibility() {
+            const toolbar = document.getElementById('mobile-toolbar');
+            let shouldShow = false;
+
+            if (currentToolbar === 'show') {
+                shouldShow = true;
+            } else if (currentToolbar === 'hide') {
+                shouldShow = false;
+            } else {
+                // Auto: detect touch device or small screen
+                const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+                const isSmallScreen = window.innerWidth < 768;
+                const isMobileUA = /Mobile|Android|iPhone|iPad|iPod|webOS|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+                shouldShow = isTouchDevice || isSmallScreen || isMobileUA;
+            }
+
+            if (shouldShow) {
+                toolbar.classList.add('show');
+                document.body.classList.add('toolbar-visible');
+            } else {
+                toolbar.classList.remove('show');
+                document.body.classList.remove('toolbar-visible');
+            }
+        }
+
         function setupDrawer() {
             const menuBtn = document.getElementById('menu-btn');
             const drawer = document.getElementById('drawer');
@@ -493,13 +928,80 @@ class WebShellServer {
             document.getElementById('theme-select').onchange = e => applyTheme(e.target.value);
             document.getElementById('font-select').onchange = e => applyFont(e.target.value);
             document.getElementById('font-size').oninput = e => applyFontSize(parseInt(e.target.value));
+            document.getElementById('toolbar-select').onchange = e => applyToolbar(e.target.value);
+        }
+
+        function setupMobileToolbar() {
+            const toolbar = document.getElementById('mobile-toolbar');
+            updateToolbarVisibility();
+
+            const keyMap = {
+                'Escape': '\\x1b',
+                'Tab': '\\t',
+                'ArrowUp': '\\x1b[A',
+                'ArrowDown': '\\x1b[B',
+                'ArrowRight': '\\x1b[C',
+                'ArrowLeft': '\\x1b[D'
+            };
+            // Ctrl + key sequences
+            const ctrlKeyMap = {
+                'Escape': '\\x1b',
+                'Tab': '\\t',
+                'ArrowUp': '\\x1b[1;5A',
+                'ArrowDown': '\\x1b[1;5B',
+                'ArrowRight': '\\x1b[1;5C',
+                'ArrowLeft': '\\x1b[1;5D'
+            };
+
+            toolbar.querySelectorAll('button').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    const mod = btn.dataset.mod;
+                    const key = btn.dataset.key;
+                    const seq = btn.dataset.seq;
+
+                    if (mod) {
+                        modifiers[mod] = !modifiers[mod];
+                        btn.classList.toggle('active', modifiers[mod]);
+                        return;
+                    }
+
+                    let data = '';
+                    if (seq) {
+                        data = seq;
+                    } else if (key) {
+                        if (modifiers.ctrl) {
+                            // Ctrl + key
+                            if (ctrlKeyMap[key]) {
+                                data = ctrlKeyMap[key];
+                            } else if (key.length === 1) {
+                                // Ctrl + letter (e.g., Ctrl+C = \\x03)
+                                data = String.fromCharCode(key.toUpperCase().charCodeAt(0) - 64);
+                            } else {
+                                data = keyMap[key] || '';
+                            }
+                        } else {
+                            data = keyMap[key] || '';
+                        }
+                    }
+
+                    if (data && ws?.readyState === WebSocket.OPEN && selectedClientId) {
+                        ws.send(JSON.stringify({ type: 'input', clientId: selectedClientId, text: data }));
+                        // Reset modifiers after use
+                        modifiers.ctrl = false;
+                        modifiers.alt = false;
+                        toolbar.querySelectorAll('.mod-btn').forEach(b => b.classList.remove('active'));
+                    }
+                    term.focus();
+                });
+            });
         }
 
         function updateClientList() {
             const listEl = document.getElementById('client-list');
             const t = themes[currentTheme];
             if (clients.length === 0) {
-                listEl.innerHTML = '<div class="empty-clients">等待客户端连接...</div>';
+                listEl.innerHTML = '<div class="empty-clients">Waiting for clients...</div>';
                 return;
             }
             listEl.innerHTML = clients.map(c => {
@@ -538,6 +1040,7 @@ class WebShellServer {
         function init() {
             loadSettings();
             setupDrawer();
+            setupMobileToolbar();
             term = new Terminal({
                 theme: themes[currentTheme], fontFamily: currentFont,
                 fontSize: currentFontSize, cursorBlink: true
@@ -548,7 +1051,18 @@ class WebShellServer {
             fitAddon.fit();
             term.onData(data => {
                 if (ws?.readyState === WebSocket.OPEN && selectedClientId) {
-                    ws.send(JSON.stringify({ type: 'input', clientId: selectedClientId, text: data }));
+                    let sendData = data;
+                    // Apply Ctrl modifier to keyboard input
+                    if (modifiers.ctrl && data.length === 1) {
+                        const code = data.toUpperCase().charCodeAt(0);
+                        if (code >= 65 && code <= 90) { // A-Z
+                            sendData = String.fromCharCode(code - 64);
+                        }
+                        // Reset Ctrl after use
+                        modifiers.ctrl = false;
+                        document.querySelectorAll('.mod-btn').forEach(b => b.classList.remove('active'));
+                    }
+                    ws.send(JSON.stringify({ type: 'input', clientId: selectedClientId, text: sendData }));
                 }
             });
             window.addEventListener('resize', () => {
@@ -567,6 +1081,7 @@ class WebShellServer {
         function connect() {
             ws = new WebSocket('ws://' + location.host);
             ws.onopen = () => {
+                console.log('WebSocket connected');
                 if (selectedClientId) {
                     ws.send(JSON.stringify({
                         type: 'resize', clientId: selectedClientId,
@@ -574,6 +1089,9 @@ class WebShellServer {
                     }));
                 }
             };
+            ws.onerror = (e) => {
+                console.error('WebSocket error:', e);
+            };
             ws.onmessage = e => {
                 const d = JSON.parse(e.data);
                 switch (d.type) {
@@ -598,7 +1116,7 @@ class WebShellServer {
                             selectedClientId = null;
                             term.clear();
                             document.getElementById('header-title').innerHTML =
-                                '<span class="no-client">已断开</span>';
+                                '<span class="no-client">Disconnected</span>';
                             if (clients.length > 0) selectClient(clients[0].id);
                         }
                         break;
@@ -609,7 +1127,15 @@ class WebShellServer {
                         break;
                 }
             };
-            ws.onclose = () => setTimeout(connect, 3000);
+            ws.onclose = (e) => {
+                // Don't reconnect if unauthorized (code 1008)
+                if (e.code === 1008) {
+                    console.log('WebSocket closed: unauthorized, redirecting to login');
+                    location.reload();
+                    return;
+                }
+                setTimeout(connect, 3000);
+            };
         }
 
         init();
@@ -619,7 +1145,13 @@ class WebShellServer {
     }
 }
 
-new WebShellServer(PORT);
+new TermitesServer(PORT);
 
 process.on('SIGINT', () => process.exit(0));
-process.on('SIGTERM', () => process.exit(0));
+process.on('SIGTERM', () => process.exit(0));
+process.on('exit', () => {
+    // Clean up local client on exit
+    if (global.localClient) {
+        global.localClient.kill();
+    }
+});