Claude Code transcript - page 1/2

#!/usr/bin/env bash
if [[ -n "$MACHINE_SCRIPT_DEBUG" ]]; then
    set -x
fi

export DEBIAN_FRONTEND=noninteractive
export NEEDRESTART_MODE=a

APT_INSTALL="sudo --preserve-env=DEBIAN_FRONTEND,NEEDRESTART_MODE apt -y install"

set -eo pipefail  ## https://vaneyckt.io/posts/safer_bash_scripts_with_set_euxo_pipefail/

echo "***********************************************************************"
echo "* web-shell.sh"
echo "***********************************************************************"
echo "$0 called with $*"

# Defaults
TTYD_PORT=7681
VERIFY_PORT=9222
SHELL_USER="webshell"
FQDN=""
JWT_PUBLIC_KEY_FILE=""
FORCE=false

while (( "$#" )); do
   case $1 in
      --fqdn)
         shift&&FQDN="$1"||{ echo "Missing --fqdn value"; exit 1; }
         ;;
      --jwt-public-key-file)
         shift&&JWT_PUBLIC_KEY_FILE="$1"||{ echo "Missing --jwt-public-key-file value"; exit 1; }
         ;;
      --shell-user)
         shift&&SHELL_USER="$1"||{ echo "Missing --shell-user value"; exit 1; }
         ;;
      -f)
         FORCE=true
         ;;
      *)
         echo "Unrecognized argument: $1"
         ;;
   esac
   shift
done

# Validate required arguments
if [[ -z "$FQDN" ]]; then
    echo "Error: --fqdn is required (for Let's Encrypt TLS)"
    exit 1
fi
if [[ -z "$JWT_PUBLIC_KEY_FILE" ]]; then
    echo "Error: --jwt-public-key-file is required (PEM-encoded public key for JWT verification)"
    exit 1
fi
if [[ ! -f "$JWT_PUBLIC_KEY_FILE" ]]; then
    echo "Error: JWT public key file not found: $JWT_PUBLIC_KEY_FILE"
    exit 1
fi

# Check if already installed
if [[ "$FORCE" != "true" ]]; then
    which ttyd >/dev/null 2>&1 && rc=$? || rc=$?
    if [[ $rc -eq 0 ]]; then
        echo "ttyd already installed. Use -f to force reinstall."
        exit 0
    fi
fi

echo "***********************************************************************"
echo "* Installing packages"
echo "***********************************************************************"

sudo apt update
$APT_INSTALL ca-certificates curl python3-jwt python3-cryptography

# Install Caddy from official repository
if ! which caddy >/dev/null 2>&1; then
    echo "***********************************************************************"
    echo "* Installing Caddy"
    echo "***********************************************************************"
    $APT_INSTALL debian-keyring debian-archive-keyring apt-transport-https
    curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
    curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
    sudo apt update
    $APT_INSTALL caddy
fi

# Install ttyd binary
echo "***********************************************************************"
echo "* Installing ttyd"
echo "***********************************************************************"
TTYD_VERSION="1.7.7"
ARCH=$(uname -m)
case $ARCH in
    x86_64)  TTYD_ARCH="x86_64" ;;
    aarch64) TTYD_ARCH="aarch64" ;;
    armv7l)  TTYD_ARCH="armhf" ;;
    *)       echo "Unsupported architecture: $ARCH"; exit 1 ;;
esac
curl -fsSL -o /tmp/ttyd.$$ "https://github.com/tsl0922/ttyd/releases/download/${TTYD_VERSION}/ttyd.${TTYD_ARCH}"
sudo install -m 755 /tmp/ttyd.$$ /usr/local/bin/ttyd
rm -f /tmp/ttyd.$$

# Create shell user if needed
if ! id "$SHELL_USER" >/dev/null 2>&1; then
    echo "***********************************************************************"
    echo "* Creating user: $SHELL_USER"
    echo "***********************************************************************"
    sudo useradd -m -s /bin/bash "$SHELL_USER"
fi

# Set up config directory
echo "***********************************************************************"
echo "* Writing configuration"
echo "***********************************************************************"
sudo mkdir -p /etc/web-shell
sudo cp "$JWT_PUBLIC_KEY_FILE" /etc/web-shell/public.pem
sudo chmod 644 /etc/web-shell/public.pem

# Write JWT verification service
sudo tee /etc/web-shell/jwt-verify.py > /dev/null << 'PYEOF'
#!/usr/bin/env python3
"""Tiny JWT verification service for Caddy forward_auth."""
import sys, http.server
from urllib.parse import urlparse, parse_qs
import jwt

PUBLIC_KEY_PATH = sys.argv[1]
LISTEN_PORT = int(sys.argv[2])

with open(PUBLIC_KEY_PATH, 'rb') as f:
    PUBLIC_KEY = f.read()

ALGORITHMS = ["EdDSA", "RS256", "RS384", "RS512", "ES256", "ES384", "ES512"]

class AuthHandler(http.server.BaseHTTPRequestHandler):
    def do_GET(self):
        uri = self.headers.get('X-Forwarded-Uri', self.path)
        params = parse_qs(urlparse(uri).query)
        token = params.get('token', [None])[0]
        if token:
            try:
                jwt.decode(token, PUBLIC_KEY, algorithms=ALGORITHMS)
                self.send_response(200)
                self.end_headers()
                return
            except jwt.exceptions.PyJWTError:
                pass
        self.send_response(401)
        self.end_headers()

    def log_message(self, format, *args):
        pass

http.server.HTTPServer(('127.0.0.1', LISTEN_PORT), AuthHandler).serve_forever()
PYEOF
sudo chmod 644 /etc/web-shell/jwt-verify.py

# Write Caddyfile
sudo tee /etc/caddy/Caddyfile > /dev/null << CADDYEOF
${FQDN} {
    @ws path /ws
    forward_auth @ws 127.0.0.1:${VERIFY_PORT} {
        uri /verify
    }
    reverse_proxy 127.0.0.1:${TTYD_PORT}
}
CADDYEOF

# Write systemd unit for ttyd
sudo tee /etc/systemd/system/ttyd.service > /dev/null << SVCEOF
[Unit]
Description=ttyd web terminal
After=network.target

[Service]
Type=simple
User=${SHELL_USER}
ExecStart=/usr/local/bin/ttyd --port ${TTYD_PORT} --interface lo --ping-interval 30 bash -l
Restart=always
RestartSec=5

[Install]
WantedBy=multi-user.target
SVCEOF

# Write systemd unit for JWT verifier
sudo tee /etc/systemd/system/jwt-verify.service > /dev/null << SVCEOF
[Unit]
Description=JWT verification service for web-shell
After=network.target

[Service]
Type=simple
User=nobody
ExecStart=/usr/bin/python3 /etc/web-shell/jwt-verify.py /etc/web-shell/public.pem ${VERIFY_PORT}
Restart=always
RestartSec=5

[Install]
WantedBy=multi-user.target
SVCEOF

# Enable and start services
echo "***********************************************************************"
echo "* Starting services"
echo "***********************************************************************"
sudo systemctl daemon-reload
sudo systemctl enable --now jwt-verify.service
sudo systemctl enable --now ttyd.service
sudo systemctl restart caddy

echo "***********************************************************************"
echo "* web-shell.sh complete"
echo "***********************************************************************"
echo "  FQDN:       ${FQDN}"
echo "  Shell user:  ${SHELL_USER}"
echo "  ttyd:        127.0.0.1:${TTYD_PORT} (localhost only)"
echo "  JWT verify:  127.0.0.1:${VERIFY_PORT} (localhost only)"
echo "  Caddy:       https://${FQDN} (Let's Encrypt TLS)"
echo ""
echo "  Interactive: https://${FQDN}/?token=<JWT>"
echo "  WebSocket:   wss://${FQDN}/ws?token=<JWT>"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Shell Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: system-ui, sans-serif; background: #1a1a2e; color: #e0e0e0; padding: 20px; }
        h1 { font-size: 1.3em; margin-bottom: 16px; color: #a0c4ff; }
        h2 { font-size: 1.1em; margin-bottom: 8px; color: #a0c4ff; }

        .panel {
            background: #16213e;
            border: 1px solid #0f3460;
            border-radius: 6px;
            padding: 16px;
            margin-bottom: 16px;
        }
        .row { display: flex; gap: 16px; margin-bottom: 16px; }
        .row > * { flex: 1; }

        label { display: block; font-size: 0.85em; color: #999; margin-bottom: 4px; }
        input, textarea {
            width: 100%;
            background: #0a0a1a;
            border: 1px solid #0f3460;
            color: #e0e0e0;
            padding: 8px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 0.9em;
        }
        textarea { resize: vertical; min-height: 60px; }

        button {
            background: #0f3460;
            color: #e0e0e0;
            border: 1px solid #1a5276;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9em;
            margin-right: 8px;
            margin-top: 8px;
        }
        button:hover { background: #1a5276; }
        button:disabled { opacity: 0.4; cursor: default; }

        #terminal-container {
            height: 400px;
            background: #000;
            border-radius: 4px;
            overflow: hidden;
        }

        #exec-output {
            background: #0a0a1a;
            border: 1px solid #0f3460;
            color: #b0f0b0;
            padding: 12px;
            font-family: monospace;
            font-size: 0.85em;
            white-space: pre-wrap;
            min-height: 80px;
            max-height: 300px;
            overflow-y: auto;
            border-radius: 4px;
        }

        .status { font-size: 0.85em; margin-top: 8px; }
        .status.ok { color: #4caf50; }
        .status.err { color: #f44336; }
        .status.info { color: #ffa726; }
    </style>
</head>
<body>

<h1>Web Shell Example</h1>

<!-- Key Management -->
<div class="panel">
    <h2>1. Key Pair</h2>
    <p style="font-size:0.85em; color:#999; margin-bottom:12px;">
        Generate an Ed25519 key pair in the browser. The public key (PEM) is provisioned onto the
        machine; the private key stays here and signs JWTs.
    </p>
    <button id="btn-generate">Generate Key Pair</button>
    <button id="btn-export-pub">Copy Public Key PEM</button>
    <button id="btn-save-keys">Save Keys to localStorage</button>
    <button id="btn-load-keys">Load Saved Keys</button>
    <div id="key-status" class="status"></div>
    <div style="margin-top: 12px;">
        <label>Public Key (PEM) &mdash; provision this on the machine</label>
        <textarea id="public-key-pem" readonly rows="4"></textarea>
    </div>
</div>

<!-- Connection -->
<div class="panel">
    <h2>2. Connect</h2>
    <div class="row">
        <div>
            <label>Machine Host (e.g. shell.example.com)</label>
            <input id="host" type="text" placeholder="shell.example.com">
        </div>
        <div>
            <label>JWT Lifetime (seconds)</label>
            <input id="jwt-lifetime" type="number" value="3600">
        </div>
    </div>
    <button id="btn-connect">Connect Terminal</button>
    <button id="btn-disconnect" disabled>Disconnect</button>
    <div id="conn-status" class="status"></div>
</div>

<!-- Interactive Terminal -->
<div class="panel">
    <h2>3. Interactive Terminal</h2>
    <div id="terminal-container"></div>
</div>

<!-- Programmatic Execution -->
<div class="panel">
    <h2>4. Programmatic Command Execution</h2>
    <p style="font-size:0.85em; color:#999; margin-bottom:12px;">
        Runs a command on a separate WebSocket connection and captures output.
        Uses sentinel markers to extract clean output and exit code.
    </p>
    <div class="row">
        <div>
            <label>Command</label>
            <input id="exec-cmd" type="text" placeholder="uname -a" value="uname -a">
        </div>
    </div>
    <button id="btn-exec">Run Command</button>
    <div id="exec-status" class="status"></div>
    <div style="margin-top: 8px;">
        <label>Output</label>
        <div id="exec-output">(no output yet)</div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script src="web-shell.js"></script>
</body>
</html>

/**
 * Web Shell Example — browser-side key management, JWT signing, interactive
 * terminal, and programmatic command execution over ttyd WebSocket.
 *
 * Dependencies: xterm.js and xterm-addon-fit (loaded from CDN in index.html).
 * No build step required.
 */

// ---------------------------------------------------------------------------
// State
// ---------------------------------------------------------------------------

let keyPair = null;   // { publicKey: CryptoKey, privateKey: CryptoKey }
let publicPem = '';
let terminal = null;
let termSocket = null;
const STORAGE_KEY = 'web-shell-keypair';

// ---------------------------------------------------------------------------
// DOM refs
// ---------------------------------------------------------------------------

const $ = (id) => document.getElementById(id);

const ui = {
    btnGenerate:    $('btn-generate'),
    btnExportPub:   $('btn-export-pub'),
    btnSaveKeys:    $('btn-save-keys'),
    btnLoadKeys:    $('btn-load-keys'),
    keyStatus:      $('key-status'),
    publicKeyPem:   $('public-key-pem'),
    host:           $('host'),
    jwtLifetime:    $('jwt-lifetime'),
    btnConnect:     $('btn-connect'),
    btnDisconnect:  $('btn-disconnect'),
    connStatus:     $('conn-status'),
    termContainer:  $('terminal-container'),
    execCmd:        $('exec-cmd'),
    btnExec:        $('btn-exec'),
    execStatus:     $('exec-status'),
    execOutput:     $('exec-output'),
};

// ---------------------------------------------------------------------------
// Utility: status helpers
// ---------------------------------------------------------------------------

function setStatus(el, cls, msg) {
    el.textContent = msg;
    el.className = 'status ' + cls;
}

// ---------------------------------------------------------------------------
// 1. Key Management (Web Crypto — Ed25519)
// ---------------------------------------------------------------------------

/**
 * Generate an Ed25519 key pair using the Web Crypto API.
 * Ed25519 support: Chrome 113+, Firefox 130+, Safari 17+.
 */
async function generateKeyPair() {
    try {
        keyPair = await crypto.subtle.generateKey('Ed25519', true, ['sign', 'verify']);
        publicPem = await exportPublicKeyPem(keyPair.publicKey);
        ui.publicKeyPem.value = publicPem;
        setStatus(ui.keyStatus, 'ok', 'Key pair generated.');
    } catch (e) {
        setStatus(ui.keyStatus, 'err', 'Failed: ' + e.message +
            '. Ed25519 requires Chrome 113+, Firefox 130+, or Safari 17+.');
    }
}

/** Export a CryptoKey (public, Ed25519) to PEM format. */
async function exportPublicKeyPem(key) {
    const spki = await crypto.subtle.exportKey('spki', key);
    const b64 = btoa(String.fromCharCode(...new Uint8Array(spki)));
    const lines = b64.match(/.{1,64}/g).join('\n');
    return '-----BEGIN PUBLIC KEY-----\n' + lines + '\n-----END PUBLIC KEY-----';
}

/** Save both keys to localStorage as exportable JWK. */
async function saveKeys() {
    if (!keyPair) { setStatus(ui.keyStatus, 'err', 'No key pair to save.'); return; }
    const pub = await crypto.subtle.exportKey('jwk', keyPair.publicKey);
    const priv = await crypto.subtle.exportKey('jwk', keyPair.privateKey);
    localStorage.setItem(STORAGE_KEY, JSON.stringify({ pub, priv }));
    setStatus(ui.keyStatus, 'ok', 'Keys saved to localStorage.');
}

/** Load keys from localStorage. */
async function loadKeys() {
    const stored = localStorage.getItem(STORAGE_KEY);
    if (!stored) { setStatus(ui.keyStatus, 'err', 'No saved keys found.'); return; }
    const { pub, priv } = JSON.parse(stored);
    const publicKey = await crypto.subtle.importKey('jwk', pub, 'Ed25519', true, ['verify']);
    const privateKey = await crypto.subtle.importKey('jwk', priv, 'Ed25519', true, ['sign']);
    keyPair = { publicKey, privateKey };
    publicPem = await exportPublicKeyPem(publicKey);
    ui.publicKeyPem.value = publicPem;
    setStatus(ui.keyStatus, 'ok', 'Keys loaded from localStorage.');
}

function copyPublicKey() {
    if (!publicPem) { setStatus(ui.keyStatus, 'err', 'No public key to copy.'); return; }
    navigator.clipboard.writeText(publicPem);
    setStatus(ui.keyStatus, 'ok', 'Public key PEM copied to clipboard.');
}

// ---------------------------------------------------------------------------
// 2. JWT Signing (Web Crypto)
// ---------------------------------------------------------------------------

/** Base64url encode a Uint8Array or ArrayBuffer. */
function b64url(buf) {
    const bytes = buf instanceof ArrayBuffer ? new Uint8Array(buf) : buf;
    return btoa(String.fromCharCode(...bytes))
        .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

/**
 * Create and sign a JWT using the Ed25519 private key.
 * Claims: iat, exp. Add sub/aud/iss as needed.
 */
async function createJwt(lifetimeSec) {
    if (!keyPair) throw new Error('No key pair — generate or load keys first.');

    const header = { alg: 'EdDSA', typ: 'JWT' };
    const now = Math.floor(Date.now() / 1000);
    const payload = { iat: now, exp: now + lifetimeSec };

    const enc = new TextEncoder();
    const signingInput = b64url(enc.encode(JSON.stringify(header))) + '.' +
                         b64url(enc.encode(JSON.stringify(payload)));
    const sig = await crypto.subtle.sign('Ed25519', keyPair.privateKey, enc.encode(signingInput));

    return signingInput + '.' + b64url(sig);
}

// ---------------------------------------------------------------------------
// 3. Interactive Terminal (xterm.js + ttyd WebSocket)
// ---------------------------------------------------------------------------

/**
 * ttyd WebSocket protocol:
 *   Client → Server:  0 + input bytes   (stdin)
 *                      1 + JSON resize   (e.g. {"columns":80,"rows":24})
 *   Server → Client:  0 + output bytes  (stdout)
 *                      1 + JSON config   (title etc.)
 *                      2 + JSON title
 */

async function connectTerminal() {
    const host = ui.host.value.trim();
    if (!host) { setStatus(ui.connStatus, 'err', 'Enter a host.'); return; }

    const lifetime = parseInt(ui.jwtLifetime.value) || 3600;
    let token;
    try {
        token = await createJwt(lifetime);
    } catch (e) {
        setStatus(ui.connStatus, 'err', e.message);
        return;
    }

    // Clean up previous connection
    disconnectTerminal();

    // Create terminal
    terminal = new Terminal({ cursorBlink: true, fontSize: 14 });
    const fitAddon = new FitAddon.FitAddon();
    terminal.loadAddon(fitAddon);
    terminal.open(ui.termContainer);
    fitAddon.fit();

    // Resize on window resize
    const onResize = () => fitAddon.fit();
    window.addEventListener('resize', onResize);
    terminal._onResizeCleanup = () => window.removeEventListener('resize', onResize);

    // Connect WebSocket
    const wsUrl = 'wss://' + host + '/ws?token=' + encodeURIComponent(token);
    setStatus(ui.connStatus, 'info', 'Connecting to ' + host + '...');

    termSocket = new WebSocket(wsUrl);
    termSocket.binaryType = 'arraybuffer';

    termSocket.onopen = () => {
        setStatus(ui.connStatus, 'ok', 'Connected.');
        ui.btnConnect.disabled = true;
        ui.btnDisconnect.disabled = false;

        // Send initial terminal size
        const msg = '1' + JSON.stringify({ columns: terminal.cols, rows: terminal.rows });
        termSocket.send(new TextEncoder().encode(msg));
    };

    termSocket.onmessage = (ev) => {
        const data = new Uint8Array(ev.data);
        const msgType = data[0];
        const payload = data.slice(1);
        if (msgType === 0) {
            // stdout
            terminal.write(payload);
        }
        // msgType 1 = config, 2 = title — ignored for simplicity
    };

    termSocket.onclose = () => {
        setStatus(ui.connStatus, 'info', 'Disconnected.');
        ui.btnConnect.disabled = false;
        ui.btnDisconnect.disabled = true;
    };

    termSocket.onerror = () => {
        setStatus(ui.connStatus, 'err', 'WebSocket error — check host, token, and that the machine is running.');
    };

    // Send keystrokes
    terminal.onData((data) => {
        if (termSocket && termSocket.readyState === WebSocket.OPEN) {
            const bytes = new TextEncoder().encode(data);
            const msg = new Uint8Array(1 + bytes.length);
            msg[0] = 0; // stdin type
            msg.set(bytes, 1);
            termSocket.send(msg);
        }
    });

    // Send resize events
    terminal.onResize(({ cols, rows }) => {
        if (termSocket && termSocket.readyState === WebSocket.OPEN) {
            const msg = '1' + JSON.stringify({ columns: cols, rows: rows });
            termSocket.send(new TextEncoder().encode(msg));
        }
    });
}

function disconnectTerminal() {
    if (termSocket) {
        termSocket.close();
        termSocket = null;
    }
    if (terminal) {
        if (terminal._onResizeCleanup) terminal._onResizeCleanup();
        terminal.dispose();
        terminal = null;
    }
    ui.btnConnect.disabled = false;
    ui.btnDisconnect.disabled = true;
}

// ---------------------------------------------------------------------------
// 4. Programmatic Command Execution
// ---------------------------------------------------------------------------

/**
 * Execute a command on a fresh WebSocket connection and capture output.
 *
 * Strategy: send a wrapped command with unique sentinel markers, then collect
 * everything between the markers. This avoids parsing prompts or escape codes.
 *
 * Returns: { stdout: string, exitCode: number }
 */
async function execCommand(command) {
    const host = ui.host.value.trim();
    if (!host) throw new Error('Enter a host.');

    const lifetime = parseInt(ui.jwtLifetime.value) || 3600;
    const token = await createJwt(lifetime);
    const wsUrl = 'wss://' + host + '/ws?token=' + encodeURIComponent(token);

    return new Promise((resolve, reject) => {
        const ws = new WebSocket(wsUrl);
        ws.binaryType = 'arraybuffer';

        let output = '';
        let settled = false;
        const sentinel = '__EXEC_' + Math.random().toString(36).slice(2, 10) + '__';
        const startMarker = sentinel + '_START';
        const endMarker = sentinel + '_END';

        const timeout = setTimeout(() => {
            if (!settled) {
                settled = true;
                ws.close();
                reject(new Error('Command timed out after 30s'));
            }
        }, 30000);

        ws.onopen = () => {
            // Wait briefly for the shell prompt, then send the wrapped command.
            // TERM=dumb suppresses most escape sequences in command output.
            setTimeout(() => {
                const wrapped =
                    'export TERM=dumb\n' +
                    'echo ' + startMarker + '\n' +
                    command + '\n' +
                    'echo ' + endMarker + ' $?\n';
                const bytes = new TextEncoder().encode(wrapped);
                const msg = new Uint8Array(1 + bytes.length);
                msg[0] = 0;
                msg.set(bytes, 1);
                ws.send(msg);
            }, 500);
        };

        ws.onmessage = (ev) => {
            const data = new Uint8Array(ev.data);
            if (data[0] === 0) {
                output += new TextDecoder().decode(data.slice(1));

                // Check if we have both markers
                const startIdx = output.indexOf(startMarker + '\n');
                const endIdx = output.indexOf(endMarker + ' ');
                if (startIdx !== -1 && endIdx !== -1 && endIdx > startIdx) {
                    settled = true;
                    clearTimeout(timeout);

                    const body = output.slice(startIdx + startMarker.length + 1, endIdx);
                    // Extract exit code from the line containing the end marker
                    const afterEnd = output.slice(endIdx + endMarker.length + 1);
                    const exitCode = parseInt(afterEnd.trim().split(/\s/)[0]) || 0;

                    ws.close();
                    resolve({ stdout: body.trim(), exitCode });
                }
            }
        };

        ws.onerror = () => {
            if (!settled) {
                settled = true;
                clearTimeout(timeout);
                reject(new Error('WebSocket error'));
            }
        };

        ws.onclose = () => {
            if (!settled) {
                settled = true;
                clearTimeout(timeout);
                reject(new Error('Connection closed before command completed'));
            }
        };
    });
}

async function onExec() {
    const cmd = ui.execCmd.value.trim();
    if (!cmd) { setStatus(ui.execStatus, 'err', 'Enter a command.'); return; }

    setStatus(ui.execStatus, 'info', 'Running...');
    ui.execOutput.textContent = '';
    ui.btnExec.disabled = true;

    try {
        const result = await execCommand(cmd);
        ui.execOutput.textContent = result.stdout;
        setStatus(ui.execStatus, 'ok', 'Exit code: ' + result.exitCode);
    } catch (e) {
        setStatus(ui.execStatus, 'err', e.message);
    } finally {
        ui.btnExec.disabled = false;
    }
}

// ---------------------------------------------------------------------------
// Event wiring
// ---------------------------------------------------------------------------

ui.btnGenerate.addEventListener('click', generateKeyPair);
ui.btnExportPub.addEventListener('click', copyPublicKey);
ui.btnSaveKeys.addEventListener('click', saveKeys);
ui.btnLoadKeys.addEventListener('click', loadKeys);
ui.btnConnect.addEventListener('click', connectTerminal);
ui.btnDisconnect.addEventListener('click', disconnectTerminal);
ui.btnExec.addEventListener('click', onExec);

// Try loading saved keys on startup
loadKeys().catch(() => {});