termites 1.0.0

package/server.js

@@ -0,0 +1,625 @@
+#!/usr/bin/env node
+const http = require('http');
+const WebSocket = require('ws');
+const crypto = require('crypto');
+
+const PORT = process.env.PORT || 3456;
+
+class WebShellServer {
+    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.startServer();
+    }
+
+    startServer() {
+        this.httpServer = http.createServer((req, res) => {
+            this.handleHttpRequest(req, res);
+        });
+
+        this.wss = new WebSocket.Server({ server: this.httpServer });
+
+        this.wss.on('connection', (ws, req) => {
+            const isClient = req.url === '/client';
+
+            if (isClient) {
+                this.handleClientConnection(ws);
+            } else {
+                this.handleBrowserConnection(ws);
+            }
+        });
+
+        this.httpServer.listen(this.port, () => {
+            console.log(`WebShell Server 启动: http://localhost:${this.port}`);
+            console.log(`客户端连接地址: ws://localhost:${this.port}/client`);
+        });
+    }
+
+    // Handle shell client connections
+    handleClientConnection(ws) {
+        const clientId = crypto.randomUUID();
+        console.log(`新客户端连接: ${clientId}`);
+
+        const clientData = {
+            ws,
+            info: null,
+            outputBuffer: []
+        };
+        this.clients.set(clientId, clientData);
+
+        ws.on('message', (message) => {
+            try {
+                const data = JSON.parse(message);
+                this.handleClientMessage(clientId, data);
+            } catch (e) {
+                console.error('解析客户端消息失败:', e);
+            }
+        });
+
+        ws.on('close', () => {
+            console.log(`客户端断开: ${clientId}`);
+            this.clients.delete(clientId);
+            this.broadcastToBrowsers({
+                type: 'client-disconnected',
+                clientId
+            });
+        });
+    }
+
+    handleClientMessage(clientId, data) {
+        const client = this.clients.get(clientId);
+        if (!client) return;
+
+        switch (data.type) {
+            case 'register':
+                client.info = data.info;
+                console.log(`客户端注册: ${data.info.username}@${data.info.hostname}`);
+                this.broadcastToBrowsers({
+                    type: 'client-connected',
+                    client: { id: clientId, ...data.info }
+                });
+                this.broadcastClientList();
+                break;
+
+            case 'output':
+                client.outputBuffer.push(data.data);
+                if (client.outputBuffer.length > 1000) {
+                    client.outputBuffer = client.outputBuffer.slice(-500);
+                }
+                this.broadcastToBrowsers({
+                    type: 'output',
+                    clientId,
+                    data: data.data
+                });
+                break;
+
+            case 'exit':
+                console.log(`客户端 shell 退出: ${clientId}`);
+                break;
+        }
+    }
+
+    // Handle browser connections
+    handleBrowserConnection(ws) {
+        console.log('新浏览器连接');
+        this.browsers.add(ws);
+
+        // Send current client list
+        ws.send(JSON.stringify({
+            type: 'clients',
+            list: this.getClientList()
+        }));
+
+        ws.on('message', (message) => {
+            try {
+                const data = JSON.parse(message);
+                this.handleBrowserMessage(ws, data);
+            } catch (e) {
+                console.error('解析浏览器消息失败:', e);
+            }
+        });
+
+        ws.on('close', () => {
+            this.browsers.delete(ws);
+        });
+    }
+
+    handleBrowserMessage(browserWs, data) {
+        switch (data.type) {
+            case 'select':
+                const client = this.clients.get(data.clientId);
+                if (client) {
+                    // Send buffered output to browser
+                    client.outputBuffer.forEach(output => {
+                        browserWs.send(JSON.stringify({
+                            type: 'output',
+                            clientId: data.clientId,
+                            data: output
+                        }));
+                    });
+                }
+                break;
+
+            case 'input':
+                if (data.clientId) {
+                    const targetClient = this.clients.get(data.clientId);
+                    if (targetClient && targetClient.ws.readyState === WebSocket.OPEN) {
+                        targetClient.ws.send(JSON.stringify({
+                            type: 'input',
+                            text: data.text
+                        }));
+                    }
+                }
+                break;
+
+            case 'resize':
+                if (data.clientId) {
+                    const targetClient = this.clients.get(data.clientId);
+                    if (targetClient && targetClient.ws.readyState === WebSocket.OPEN) {
+                        targetClient.ws.send(JSON.stringify({
+                            type: 'resize',
+                            cols: data.cols,
+                            rows: data.rows
+                        }));
+                    }
+                }
+                break;
+        }
+    }
+
+    getClientList() {
+        const list = [];
+        this.clients.forEach((client, id) => {
+            if (client.info) {
+                list.push({ id, ...client.info });
+            }
+        });
+        return list;
+    }
+
+    broadcastClientList() {
+        this.broadcastToBrowsers({
+            type: 'clients',
+            list: this.getClientList()
+        });
+    }
+
+    broadcastToBrowsers(data) {
+        const msg = JSON.stringify(data);
+        this.browsers.forEach(ws => {
+            if (ws.readyState === WebSocket.OPEN) {
+                ws.send(msg);
+            }
+        });
+    }
+
+    handleHttpRequest(req, res) {
+        if (req.url === '/' || req.url === '/index.html') {
+            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+            res.end(this.getHtmlPage());
+        } else {
+            res.writeHead(404);
+            res.end('Not Found');
+        }
+    }
+
+    getHtmlPage() {
+        return `<!DOCTYPE html>
+<html lang="zh-CN">
+<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>
+    <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; }
+        body { height: 100vh; display: flex; flex-direction: column; transition: background 0.3s; font-family: monospace; }
+        .header {
+            padding: 10px 12px; display: flex; align-items: center; gap: 12px;
+            border-bottom: 1px solid; transition: all 0.3s; flex-shrink: 0;
+        }
+        .menu-btn {
+            background: none; border: none; padding: 6px; cursor: pointer;
+            display: flex; flex-direction: column; gap: 4px; color: inherit;
+        }
+        .menu-btn span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 1px; }
+        .header-title { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .header-title .user { font-weight: bold; color: var(--user-color, #859900); }
+        .header-title .host { color: var(--host-color, #859900); }
+        .header-title .sep { color: var(--sep-color, #657b83); }
+        .no-client { color: #888; font-style: italic; }
+        #terminal-container { flex: 1; padding: 4px; transition: background 0.3s; overflow: hidden; }
+        .xterm { height: 100%; }
+        .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 99; opacity: 0; visibility: hidden; transition: all 0.3s; }
+        .overlay.open { opacity: 1; visibility: visible; }
+        .drawer {
+            position: fixed; top: 0; left: 0; width: 280px; max-width: 85vw; height: 100%;
+            transform: translateX(-100%); transition: transform 0.3s; z-index: 100;
+            display: flex; flex-direction: column; box-shadow: 2px 0 10px rgba(0,0,0,0.2);
+        }
+        .drawer.open { transform: translateX(0); }
+        .drawer-header {
+            padding: 16px; border-bottom: 1px solid; display: flex; justify-content: space-between; align-items: center;
+        }
+        .drawer-header h3 { font-size: 16px; font-weight: bold; }
+        .drawer-close { background: none; border: none; font-size: 24px; cursor: pointer; color: inherit; padding: 0 4px; }
+        .drawer-content { flex: 1; overflow-y: auto; }
+        .drawer-section { border-bottom: 1px solid; }
+        .drawer-section-header {
+            padding: 12px 16px; font-size: 12px; font-weight: bold; text-transform: uppercase;
+            opacity: 0.6; display: flex; align-items: center; gap: 8px;
+        }
+        .client-list { }
+        .client-item { padding: 12px 16px; cursor: pointer; transition: background 0.2s; }
+        .client-item:hover { opacity: 0.8; }
+        .client-item.selected { font-weight: bold; }
+        .client-item .client-name { font-size: 13px; margin-bottom: 3px; display: flex; align-items: center; }
+        .client-item .client-info { font-size: 11px; opacity: 0.6; padding-left: 14px; }
+        .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
+        .status-dot.online { background: #22c55e; }
+        .settings-section { padding: 12px 16px; }
+        .setting-group { margin-bottom: 16px; }
+        .setting-group:last-child { margin-bottom: 0; }
+        .setting-group label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: bold; }
+        .setting-group select, .setting-group input[type="range"] {
+            width: 100%; padding: 8px; border: 1px solid; border-radius: 4px;
+            font-size: 13px; background: inherit; color: inherit;
+        }
+        .font-size-row { display: flex; align-items: center; gap: 8px; }
+        .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; }
+    </style>
+</head>
+<body>
+    <div class="overlay" id="overlay"></div>
+    <div class="drawer" id="drawer">
+        <div class="drawer-header">
+            <h3>WebShell</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="settings-section">
+                    <div class="setting-group">
+                        <label>主题</label>
+                        <select id="theme-select">
+                            <option value="solarized-light">Solarized Light</option>
+                            <option value="solarized-dark">Solarized Dark</option>
+                            <option value="monokai">Monokai</option>
+                            <option value="dracula">Dracula</option>
+                            <option value="nord">Nord</option>
+                            <option value="github-dark">GitHub Dark</option>
+                        </select>
+                    </div>
+                    <div class="setting-group">
+                        <label>字体</label>
+                        <select id="font-select">
+                            <option value="Monaco, Menlo, monospace">Monaco</option>
+                            <option value="'Fira Code', monospace">Fira Code</option>
+                            <option value="'JetBrains Mono', monospace">JetBrains Mono</option>
+                            <option value="'Source Code Pro', monospace">Source Code Pro</option>
+                            <option value="Consolas, monospace">Consolas</option>
+                        </select>
+                    </div>
+                    <div class="setting-group">
+                        <label>字体大小</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>
+            </div>
+            <div class="drawer-section">
+                <div class="drawer-section-header">◉ 客户端</div>
+                <div class="client-list" id="client-list">
+                    <div class="empty-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>
+    <div id="terminal-container"></div>
+
+    <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
+    <script>
+        let ws, term, fitAddon;
+        let clients = [];
+        let selectedClientId = null;
+
+        const themes = {
+            'solarized-light': {
+                background: '#fdf6e3', foreground: '#657b83', cursor: '#657b83',
+                cursorAccent: '#fdf6e3', selectionBackground: '#93a1a1',
+                black: '#073642', red: '#dc322f', green: '#859900', yellow: '#b58900',
+                blue: '#268bd2', magenta: '#d33682', cyan: '#2aa198', white: '#eee8d5',
+                brightBlack: '#002b36', brightRed: '#cb4b16', brightGreen: '#586e75',
+                brightYellow: '#657b83', brightBlue: '#839496', brightMagenta: '#6c71c4',
+                brightCyan: '#93a1a1', brightWhite: '#fdf6e3',
+                headerBg: '#eee8d5', headerBorder: '#93a1a1', sidebarBg: '#eee8d5',
+                sidebarSelected: '#fdf6e3', userColor: '#859900', hostColor: '#859900',
+                sepColor: '#657b83', pathColor: '#268bd2'
+            },
+            'solarized-dark': {
+                background: '#002b36', foreground: '#839496', cursor: '#839496',
+                cursorAccent: '#002b36', selectionBackground: '#073642',
+                black: '#073642', red: '#dc322f', green: '#859900', yellow: '#b58900',
+                blue: '#268bd2', magenta: '#d33682', cyan: '#2aa198', white: '#eee8d5',
+                brightBlack: '#002b36', brightRed: '#cb4b16', brightGreen: '#586e75',
+                brightYellow: '#657b83', brightBlue: '#839496', brightMagenta: '#6c71c4',
+                brightCyan: '#93a1a1', brightWhite: '#fdf6e3',
+                headerBg: '#073642', headerBorder: '#586e75', sidebarBg: '#073642',
+                sidebarSelected: '#002b36', userColor: '#859900', hostColor: '#859900',
+                sepColor: '#839496', pathColor: '#268bd2'
+            },
+            'monokai': {
+                background: '#272822', foreground: '#f8f8f2', cursor: '#f8f8f2',
+                cursorAccent: '#272822', selectionBackground: '#49483e',
+                black: '#272822', red: '#f92672', green: '#a6e22e', yellow: '#f4bf75',
+                blue: '#66d9ef', magenta: '#ae81ff', cyan: '#a1efe4', white: '#f8f8f2',
+                brightBlack: '#75715e', brightRed: '#f92672', brightGreen: '#a6e22e',
+                brightYellow: '#f4bf75', brightBlue: '#66d9ef', brightMagenta: '#ae81ff',
+                brightCyan: '#a1efe4', brightWhite: '#f9f8f5',
+                headerBg: '#1e1f1c', headerBorder: '#49483e', sidebarBg: '#1e1f1c',
+                sidebarSelected: '#272822', userColor: '#a6e22e', hostColor: '#a6e22e',
+                sepColor: '#f8f8f2', pathColor: '#66d9ef'
+            },
+            'dracula': {
+                background: '#282a36', foreground: '#f8f8f2', cursor: '#f8f8f2',
+                cursorAccent: '#282a36', selectionBackground: '#44475a',
+                black: '#21222c', red: '#ff5555', green: '#50fa7b', yellow: '#f1fa8c',
+                blue: '#bd93f9', magenta: '#ff79c6', cyan: '#8be9fd', white: '#f8f8f2',
+                brightBlack: '#6272a4', brightRed: '#ff6e6e', brightGreen: '#69ff94',
+                brightYellow: '#ffffa5', brightBlue: '#d6acff', brightMagenta: '#ff92df',
+                brightCyan: '#a4ffff', brightWhite: '#ffffff',
+                headerBg: '#21222c', headerBorder: '#44475a', sidebarBg: '#21222c',
+                sidebarSelected: '#282a36', userColor: '#50fa7b', hostColor: '#50fa7b',
+                sepColor: '#f8f8f2', pathColor: '#bd93f9'
+            },
+            'nord': {
+                background: '#2e3440', foreground: '#d8dee9', cursor: '#d8dee9',
+                cursorAccent: '#2e3440', selectionBackground: '#434c5e',
+                black: '#3b4252', red: '#bf616a', green: '#a3be8c', yellow: '#ebcb8b',
+                blue: '#81a1c1', magenta: '#b48ead', cyan: '#88c0d0', white: '#e5e9f0',
+                brightBlack: '#4c566a', brightRed: '#bf616a', brightGreen: '#a3be8c',
+                brightYellow: '#ebcb8b', brightBlue: '#81a1c1', brightMagenta: '#b48ead',
+                brightCyan: '#8fbcbb', brightWhite: '#eceff4',
+                headerBg: '#3b4252', headerBorder: '#4c566a', sidebarBg: '#3b4252',
+                sidebarSelected: '#2e3440', userColor: '#a3be8c', hostColor: '#a3be8c',
+                sepColor: '#d8dee9', pathColor: '#81a1c1'
+            },
+            'github-dark': {
+                background: '#0d1117', foreground: '#c9d1d9', cursor: '#c9d1d9',
+                cursorAccent: '#0d1117', selectionBackground: '#3b5070',
+                black: '#0d1117', red: '#ff7b72', green: '#7ee787', yellow: '#d29922',
+                blue: '#79c0ff', magenta: '#d2a8ff', cyan: '#a5d6ff', white: '#c9d1d9',
+                brightBlack: '#484f58', brightRed: '#ffa198', brightGreen: '#aff5b4',
+                brightYellow: '#e3b341', brightBlue: '#a5d6ff', brightMagenta: '#d2a8ff',
+                brightCyan: '#b6e3ff', brightWhite: '#f0f6fc',
+                headerBg: '#161b22', headerBorder: '#30363d', sidebarBg: '#161b22',
+                sidebarSelected: '#0d1117', userColor: '#7ee787', hostColor: '#7ee787',
+                sepColor: '#c9d1d9', pathColor: '#79c0ff'
+            }
+        };
+
+        let currentTheme = 'solarized-light';
+        let currentFont = 'Monaco, Menlo, monospace';
+        let currentFontSize = 14;
+
+        function loadSettings() {
+            const saved = localStorage.getItem('webshell-settings');
+            if (saved) {
+                const s = JSON.parse(saved);
+                currentTheme = s.theme || currentTheme;
+                currentFont = s.font || currentFont;
+                currentFontSize = s.fontSize || currentFontSize;
+            }
+            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';
+        }
+
+        function saveSettings() {
+            localStorage.setItem('webshell-settings', JSON.stringify({
+                theme: currentTheme, font: currentFont, fontSize: currentFontSize
+            }));
+        }
+
+        function applyTheme(themeName) {
+            const t = themes[themeName];
+            if (!t) return;
+            currentTheme = themeName;
+            document.body.style.background = t.background;
+            document.getElementById('terminal-container').style.background = t.background;
+            const header = document.querySelector('.header');
+            header.style.background = t.headerBg;
+            header.style.borderColor = t.headerBorder;
+            header.style.color = t.foreground;
+            const drawer = document.getElementById('drawer');
+            drawer.style.background = t.sidebarBg;
+            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 style = document.documentElement.style;
+            style.setProperty('--user-color', t.userColor);
+            style.setProperty('--host-color', t.hostColor);
+            style.setProperty('--sep-color', t.sepColor);
+            style.setProperty('--path-color', t.pathColor);
+            style.setProperty('--sidebar-selected', t.sidebarSelected);
+            if (term) term.options.theme = t;
+            updateClientList();
+            saveSettings();
+        }
+
+        function applyFont(font) {
+            currentFont = font;
+            if (term) {
+                term.options.fontFamily = font;
+                fitAddon.fit();
+            }
+            saveSettings();
+        }
+
+        function applyFontSize(size) {
+            currentFontSize = size;
+            document.getElementById('font-size-value').textContent = size + 'px';
+            if (term) {
+                term.options.fontSize = size;
+                fitAddon.fit();
+            }
+            saveSettings();
+        }
+
+        function setupDrawer() {
+            const menuBtn = document.getElementById('menu-btn');
+            const drawer = document.getElementById('drawer');
+            const overlay = document.getElementById('overlay');
+            const closeBtn = document.getElementById('drawer-close');
+            const openDrawer = () => { drawer.classList.add('open'); overlay.classList.add('open'); };
+            const closeDrawer = () => { drawer.classList.remove('open'); overlay.classList.remove('open'); };
+            menuBtn.onclick = openDrawer;
+            closeBtn.onclick = closeDrawer;
+            overlay.onclick = closeDrawer;
+            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));
+        }
+
+        function updateClientList() {
+            const listEl = document.getElementById('client-list');
+            const t = themes[currentTheme];
+            if (clients.length === 0) {
+                listEl.innerHTML = '<div class="empty-clients">等待客户端连接...</div>';
+                return;
+            }
+            listEl.innerHTML = clients.map(c => {
+                const isSelected = c.id === selectedClientId;
+                const bgColor = isSelected ? t.sidebarSelected : 'transparent';
+                return '<div class="client-item' + (isSelected ? ' selected' : '') + '" ' +
+                    'style="background: ' + bgColor + ';" ' +
+                    'onclick="selectClient(\\'' + c.id + '\\')">' +
+                    '<div class="client-name"><span class="status-dot online"></span>' +
+                    c.username + '@' + c.hostname + '</div>' +
+                    '<div class="client-info">' + (c.cwd || '') + ' · ' + (c.platform || '') + '</div></div>';
+            }).join('');
+        }
+
+        function selectClient(clientId) {
+            if (selectedClientId === clientId) {
+                document.getElementById('drawer').classList.remove('open');
+                document.getElementById('overlay').classList.remove('open');
+                return;
+            }
+            selectedClientId = clientId;
+            const client = clients.find(c => c.id === clientId);
+            if (client) {
+                document.getElementById('header-title').innerHTML =
+                    '<span class="user">' + client.username + '</span>' +
+                    '<span class="sep">@</span><span class="host">' + client.hostname + '</span>';
+            }
+            term.clear();
+            ws.send(JSON.stringify({ type: 'select', clientId }));
+            updateClientList();
+            document.getElementById('drawer').classList.remove('open');
+            document.getElementById('overlay').classList.remove('open');
+            term.focus();
+        }
+
+        function init() {
+            loadSettings();
+            setupDrawer();
+            term = new Terminal({
+                theme: themes[currentTheme], fontFamily: currentFont,
+                fontSize: currentFontSize, cursorBlink: true
+            });
+            fitAddon = new FitAddon.FitAddon();
+            term.loadAddon(fitAddon);
+            term.open(document.getElementById('terminal-container'));
+            fitAddon.fit();
+            term.onData(data => {
+                if (ws?.readyState === WebSocket.OPEN && selectedClientId) {
+                    ws.send(JSON.stringify({ type: 'input', clientId: selectedClientId, text: data }));
+                }
+            });
+            window.addEventListener('resize', () => {
+                fitAddon.fit();
+                if (ws?.readyState === WebSocket.OPEN && selectedClientId) {
+                    ws.send(JSON.stringify({
+                        type: 'resize', clientId: selectedClientId,
+                        cols: term.cols, rows: term.rows
+                    }));
+                }
+            });
+            connect();
+            applyTheme(currentTheme);
+        }
+
+        function connect() {
+            ws = new WebSocket('ws://' + location.host);
+            ws.onopen = () => {
+                if (selectedClientId) {
+                    ws.send(JSON.stringify({
+                        type: 'resize', clientId: selectedClientId,
+                        cols: term.cols, rows: term.rows
+                    }));
+                }
+            };
+            ws.onmessage = e => {
+                const d = JSON.parse(e.data);
+                switch (d.type) {
+                    case 'clients':
+                        clients = d.list;
+                        updateClientList();
+                        if (!selectedClientId && clients.length > 0) {
+                            selectClient(clients[0].id);
+                        }
+                        break;
+                    case 'client-connected':
+                        if (!clients.find(c => c.id === d.client.id)) {
+                            clients.push(d.client);
+                            updateClientList();
+                            if (!selectedClientId) selectClient(d.client.id);
+                        }
+                        break;
+                    case 'client-disconnected':
+                        clients = clients.filter(c => c.id !== d.clientId);
+                        updateClientList();
+                        if (selectedClientId === d.clientId) {
+                            selectedClientId = null;
+                            term.clear();
+                            document.getElementById('header-title').innerHTML =
+                                '<span class="no-client">已断开</span>';
+                            if (clients.length > 0) selectClient(clients[0].id);
+                        }
+                        break;
+                    case 'output':
+                        if (d.clientId === selectedClientId) {
+                            term.write(d.data);
+                        }
+                        break;
+                }
+            };
+            ws.onclose = () => setTimeout(connect, 3000);
+        }
+
+        init();
+    </script>
+</body>
+</html>`;
+    }
+}
+
+new WebShellServer(PORT);
+
+process.on('SIGINT', () => process.exit(0));
+process.on('SIGTERM', () => process.exit(0));