@hmduc16031996/claude-mb-bridge 2.0.0 → 2.1.0

package/dist/index.js

@@ -2,14 +2,13 @@
 import { Command } from 'commander';
 import { CloudflareTunnel } from './tunnel.js';
 import { startTerminalServer } from './server.js';
-import { randomUUID } from 'crypto';
 const program = new Command();
 program
     .name('claude-mobile-bridge')
     .description('Bridge Claude Code CLI to mobile via WebView')
     .version('2.0.0')
     .option('--token <token>', 'Pairing token from mobile app')
-    .option('--server <url>', 'Backend server URL', 'http://localhost:3000')
+    .option('--server <url>', 'Backend server URL', 'http://127.0.0.1:3000')
     .option('--path <path>', 'Working directory', process.cwd())
     .option('--port <port>', 'Local port for terminal server', '38473')
     .action(async (options) => {
@@ -18,13 +17,25 @@ program
         console.error('Error: --token is required');
         process.exit(1);
     }
+    // Define cleanup function
+    const cleanup = async () => {
+        console.log('\n👋 Cleaning up session and shutting down...');
+        try {
+            // Optional: Notify server to end session
+            await fetch(`${server}/api/sessions/${token}/expire`, { method: 'POST' }).catch(() => { });
+        }
+        finally {
+            tunnelResult.cleanup();
+            terminalServer.close();
+            process.exit(0);
+        }
+    };
     // 1. Start local terminal server
-    const terminalAuthToken = randomUUID().replace(/-/g, '');
     const localPort = parseInt(port, 10);
-    const terminalServer = startTerminalServer(localPort, terminalAuthToken, path);
+    const { server: terminalServer, actualPort } = await startTerminalServer(localPort, path, cleanup);
     // 2. Start Cloudflare Tunnel
     const tunnel = new CloudflareTunnel();
-    const tunnelResult = await tunnel.start(localPort);
+    const tunnelResult = await tunnel.start(actualPort);
     if (!tunnelResult.url) {
         console.error('❌ Failed to start Cloudflare Tunnel.');
         process.exit(1);
@@ -37,26 +48,22 @@ program
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({
-                public_url: tunnelResult.url,
-                terminal_auth_token: terminalAuthToken
+                public_url: tunnelResult.url
             })
         });
         if (!res.ok) {
             throw new Error('Invalid token or session expired');
         }
-        // ONLY show "session connected" as requested
         console.log('✅ Session connected');
     }
     catch (err) {
         console.error(`❌ Validation failed: ${err.message}`);
-        tunnelResult.cleanup();
-        process.exit(1);
+        console.error('   Ensure the central server is running at:', server);
+        cleanup();
     }
-    // Handle graceful shutdown
-    process.on('SIGINT', () => {
-        tunnelResult.cleanup();
-        terminalServer.close();
-        process.exit(0);
-    });
+    // Handle graceful shutdown signals
+    process.on('SIGINT', cleanup);
+    process.on('SIGTERM', cleanup);
+    process.on('SIGHUP', cleanup);
 });
 program.parse();

package/dist/server.d.ts

@@ -1 +1,4 @@
-export declare function startTerminalServer(port: number, authToken: string, workingDir: string): import("http").Server<typeof import("http").IncomingMessage, typeof import("http").ServerResponse>;
+export declare function startTerminalServer(port: number, workingDir: string, onDisconnect?: () => void): Promise<{
+    server: any;
+    actualPort: number;
+}>;

package/dist/server.js

@@ -7,19 +7,18 @@ import { createRequire } from 'module';
 const require = createRequire(import.meta.url);
 const pty = require('node-pty');
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-export function startTerminalServer(port, authToken, workingDir) {
+export function startTerminalServer(port, workingDir, onDisconnect) {
     const app = express();
     const server = createServer(app);
     const wss = new WebSocketServer({ server });
     const publicPath = path.join(__dirname, '../public');
     app.use(express.static(publicPath));
+    app.get('/health', (req, res) => {
+        res.json({ status: 'ok' });
+    });
     wss.on('connection', (ws, req) => {
-        const url = new URL(req.url || '/', `http://${req.headers.host}`);
-        const token = url.searchParams.get('token');
-        if (token !== authToken) {
-            ws.close(1008, 'Unauthorized');
-            return;
-        }
+        console.log(`📡 New connection attempt from ${req.socket.remoteAddress}`);
+        console.log('✅ Connection authorized');
         const shell = process.platform === 'win32' ? 'powershell.exe' : 'bash';
         const term = pty.spawn(shell, [], {
             name: 'xterm-256color',
@@ -28,7 +27,6 @@ export function startTerminalServer(port, authToken, workingDir) {
             cwd: workingDir,
             env: process.env
         });
-        // Automatically start claude if available
         term.write('claude\r');
         term.onData((data) => {
             ws.send(data);
@@ -53,10 +51,24 @@ export function startTerminalServer(port, authToken, workingDir) {
         });
         ws.on('close', () => {
             term.kill();
+            if (onDisconnect)
+                onDisconnect();
         });
     });
-    server.listen(port, () => {
-        // console.log(`Local terminal server running on port ${port}`);
+    return new Promise((resolve, reject) => {
+        server.on('error', (err) => {
+            if (err.code === 'EADDRINUSE' && port !== 0) {
+                console.warn(`⚠️ Port ${port} is busy, trying a random port...`);
+                resolve(startTerminalServer(0, workingDir, onDisconnect));
+            }
+            else {
+                reject(err);
+            }
+        });
+        server.listen(port, () => {
+            const address = server.address();
+            const actualPort = typeof address === 'string' ? 0 : address?.port || 0;
+            resolve({ server, actualPort });
+        });
     });
-    return server;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmduc16031996/claude-mb-bridge",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Bridge between Claude Code CLI and your mobile app via WebView",
   "type": "module",
   "main": "dist/index.js",

package/public/app.js

@@ -0,0 +1,252 @@
+// Claude Code Remote - Bridged Client
+// This script adapts the premium UI from the reference repo to the simple bridge server.
+
+class TouchScrollManager {
+  constructor(terminal, container) {
+    this.terminal = terminal;
+    this.container = container;
+    this.TIME_CONSTANT = 325;
+    this.VELOCITY_THRESHOLD = 10;
+    this.LINE_HEIGHT = 17;
+    this.TAP_THRESHOLD = 10;
+    this.TAP_DURATION = 300;
+    this.tracking = false;
+    this.animating = false;
+    this.velocity = 0;
+    this.lastY = 0;
+    this.lastTime = 0;
+    this.accumulatedScroll = 0;
+
+    const isTouchDevice = window.matchMedia('(pointer: coarse)').matches || 'ontouchstart' in window;
+    if (isTouchDevice) this.bindEvents();
+  }
+
+  bindEvents() {
+    this.overlay = document.createElement('div');
+    this.overlay.className = 'touch-scroll-overlay';
+    this.container.style.position = 'relative';
+    this.container.appendChild(this.overlay);
+
+    this.overlay.addEventListener('touchstart', (e) => this.onTouchStart(e), { passive: false });
+    this.overlay.addEventListener('touchmove', (e) => this.onTouchMove(e), { passive: false });
+    this.overlay.addEventListener('touchend', (e) => this.onTouchEnd(e), { passive: true });
+    this.overlay.addEventListener('click', () => this.terminal.focus());
+  }
+
+  onTouchStart(e) {
+    this.animating = false;
+    if (e.touches.length !== 1) return;
+    this.tracking = true;
+    this.velocity = 0;
+    this.accumulatedScroll = 0;
+    this.totalMovement = 0;
+    this.startY = e.touches[0].clientY;
+    this.lastY = this.startY;
+    this.lastTime = Date.now();
+    this.startTime = this.lastTime;
+  }
+
+  onTouchMove(e) {
+    if (!this.tracking || e.touches.length !== 1) return;
+    const currentY = e.touches[0].clientY;
+    const currentTime = Date.now();
+    const deltaY = this.lastY - currentY;
+    const deltaTime = currentTime - this.lastTime;
+    this.totalMovement += Math.abs(deltaY);
+    if (this.totalMovement >= this.TAP_THRESHOLD) e.preventDefault();
+    if (deltaTime > 0) {
+      const instantVelocity = (deltaY / deltaTime) * 1000;
+      this.velocity = 0.8 * instantVelocity + 0.2 * this.velocity;
+    }
+    this.accumulatedScroll += deltaY;
+    const linesToScroll = Math.trunc(this.accumulatedScroll / this.LINE_HEIGHT);
+    if (linesToScroll !== 0) {
+      this.terminal.scrollLines(linesToScroll);
+      this.accumulatedScroll -= linesToScroll * this.LINE_HEIGHT;
+    }
+    this.lastY = currentY;
+    this.lastTime = currentTime;
+  }
+
+  onTouchEnd() {
+    if (!this.tracking) return;
+    this.tracking = false;
+    const duration = Date.now() - this.startTime;
+    if (this.totalMovement < this.TAP_THRESHOLD && duration < this.TAP_DURATION) {
+      this.terminal.focus();
+      return;
+    }
+    if (Math.abs(this.velocity) > this.VELOCITY_THRESHOLD) this.startMomentum();
+  }
+
+  startMomentum() {
+    this.animating = true;
+    const startTime = Date.now();
+    const startVelocity = this.velocity;
+    let scrolledLines = 0;
+    const animate = () => {
+      if (!this.animating) return;
+      const elapsed = Date.now() - startTime;
+      const currentVelocity = startVelocity * Math.exp(-elapsed / this.TIME_CONSTANT);
+      if (Math.abs(currentVelocity) < this.VELOCITY_THRESHOLD) {
+        this.animating = false;
+        return;
+      }
+      const totalDistance = startVelocity * this.TIME_CONSTANT * (1 - Math.exp(-elapsed / this.TIME_CONSTANT)) / 1000;
+      const totalLines = Math.trunc(totalDistance / this.LINE_HEIGHT);
+      const linesToScroll = totalLines - scrolledLines;
+      if (linesToScroll !== 0) {
+        this.terminal.scrollLines(linesToScroll);
+        scrolledLines = totalLines;
+      }
+      requestAnimationFrame(animate);
+    };
+    requestAnimationFrame(animate);
+  }
+}
+
+class ClaudeBridge {
+  constructor() {
+    this.ws = null;
+    this.terminal = null;
+    this.fitAddon = null;
+    this.ctrlActive = false;
+    this.shiftActive = false;
+
+    const urlParams = new URLSearchParams(window.location.search);
+    this.token = urlParams.get('token') || localStorage.getItem('bridgeToken') || '';
+
+    this.initElements();
+    this.initTerminal();
+    this.bindEvents();
+
+    if (this.token) {
+      this.elements.tokenInput.value = this.token;
+      this.connect();
+    }
+  }
+
+  initElements() {
+    this.elements = {
+      authScreen: document.getElementById('auth-screen'),
+      mainScreen: document.getElementById('main-screen'),
+      tokenInput: document.getElementById('token-input'),
+      connectBtn: document.getElementById('connect-btn'),
+      authError: document.getElementById('auth-error'),
+      terminalContainer: document.getElementById('terminal-container'),
+      mobileKeys: document.getElementById('mobile-keys'),
+      header: document.getElementById('header'),
+    };
+  }
+
+  initTerminal() {
+    this.terminal = new Terminal({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: '"JetBrains Mono", monospace',
+      theme: {
+        background: '#262624',
+        foreground: '#f0f6fc',
+        cursor: '#f0a500',
+      },
+      allowTransparency: true,
+      convertEol: true,
+    });
+
+    this.fitAddon = new FitAddon.FitAddon();
+    this.terminal.loadAddon(this.fitAddon);
+    this.terminal.open(this.elements.terminalContainer);
+    
+    this.terminal.onData(data => {
+      if (this.ws?.readyState === WebSocket.OPEN) {
+        let finalData = data;
+        if (this.shiftActive && data.length === 1) {
+            const char = data.charCodeAt(0);
+            if (char >= 97 && char <= 122) finalData = String.fromCharCode(char - 32);
+            this.setShiftActive(false);
+        }
+        if (this.ctrlActive && data.length === 1) {
+            const char = data.charCodeAt(0);
+            if (char >= 65 && char <= 90) finalData = String.fromCharCode(char - 64);
+            else if (char >= 97 && char <= 122) finalData = String.fromCharCode(char - 96);
+            this.setCtrlActive(false);
+        }
+        this.ws.send(finalData);
+      }
+    });
+
+    this.terminal.onResize(({ cols, rows }) => {
+      if (this.ws?.readyState === WebSocket.OPEN) {
+        this.ws.send(JSON.stringify({ type: 'resize', cols, rows }));
+      }
+    });
+
+    window.addEventListener('resize', () => this.fitAddon.fit());
+    new TouchScrollManager(this.terminal, this.elements.terminalContainer);
+  }
+
+  bindEvents() {
+    this.elements.connectBtn.addEventListener('click', () => {
+      this.token = this.elements.tokenInput.value.trim();
+      this.connect();
+    });
+
+    document.querySelectorAll('.mobile-key').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        const key = btn.dataset.key;
+        switch (key) {
+          case 'escape': this.terminal.focus(); this.ws.send('\x1b'); break;
+          case 'ctrl': this.setCtrlActive(!this.ctrlActive); break;
+          case 'shift': this.setShiftActive(!this.shiftActive); break;
+          case 'tab': this.ws.send('\t'); break;
+          case 'up': this.ws.send('\x1b[A'); break;
+          case 'down': this.ws.send('\x1b[B'); break;
+          case 'slash': this.ws.send('/'); break;
+        }
+      });
+    });
+  }
+
+  setCtrlActive(active) {
+    this.ctrlActive = active;
+    document.querySelector('[data-key="ctrl"]').classList.toggle('active', active);
+  }
+
+  setShiftActive(active) {
+    this.shiftActive = active;
+    document.querySelector('[data-key="shift"]').classList.toggle('active', active);
+  }
+
+  connect() {
+    if (!this.token) return;
+    this.elements.connectBtn.disabled = true;
+    this.elements.authError.textContent = '';
+    
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    this.ws = new WebSocket(`${protocol}//${window.location.host}`);
+
+    this.ws.onopen = () => {
+      localStorage.setItem('bridgeToken', this.token);
+      this.elements.authScreen.classList.remove('active');
+      this.elements.mainScreen.classList.add('active');
+      this.elements.mobileKeys.classList.remove('hidden');
+      setTimeout(() => this.fitAddon.fit(), 100);
+      this.terminal.focus();
+    };
+
+    this.ws.onmessage = (e) => this.terminal.write(e.data);
+    
+    this.ws.onclose = () => {
+        this.elements.authScreen.classList.add('active');
+        this.elements.mainScreen.classList.remove('active');
+        this.elements.connectBtn.disabled = false;
+    };
+
+    this.ws.onerror = () => {
+        this.elements.authError.textContent = 'Connection failed';
+        this.elements.connectBtn.disabled = false;
+    };
+  }
+}
+
+window.addEventListener('load', () => new ClaudeBridge());

package/public/index.html

@@ -1,77 +1,167 @@
 <!DOCTYPE html>
 <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>Claude Remote Terminal</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
-    <style>
-        body, html {
-            margin: 0;
-            padding: 0;
-            height: 100%;
-            background: #0d1117;
-            overflow: hidden;
-        }
-        #terminal-container {
-            width: 100%;
-            height: 100%;
-        }
-        .xterm-viewport {
-            overflow-y: auto !important;
-        }
-    </style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="theme-color" content="#0d1117">
+  <meta name="description" content="Remote access to Claude Code sessions from any device">
+
+  <!-- Favicon -->
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%230d1117' width='100' height='100' rx='20'/><text x='50' y='68' font-size='52' font-weight='600' text-anchor='middle' fill='%2358a6ff'>C</text></svg>">
+  <link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%230d1117' width='100' height='100'/><text x='50' y='68' font-size='52' font-weight='600' text-anchor='middle' fill='%2358a6ff'>C</text></svg>">
+
+  <title>Claude Code Remote</title>
+  <link rel="manifest" href="/manifest.json">
+
+  <!-- xterm.js from CDN -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
+  <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="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11.0/lib/addon-web-links.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-serialize@0.13.0/lib/addon-serialize.min.js"></script>
+
+  <link rel="stylesheet" href="/styles.css">
 </head>
 <body>
-    <div id="terminal-container"></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>
-        const term = new Terminal({
-            cursorBlink: true,
-            theme: {
-                background: '#0d1117',
-                foreground: '#f0f6fc'
-            },
-            fontSize: 14,
-            fontFamily: 'Menlo, Monaco, "Courier New", monospace'
-        });
-        const fitAddon = new FitAddon.FitAddon();
-        term.loadAddon(fitAddon);
-        term.open(document.getElementById('terminal-container'));
-        fitAddon.fit();
+  <div id="app">
+    <!-- Auth Screen -->
+    <div id="auth-screen" class="screen active">
+      <div class="auth-container">
+        <!-- Logo -->
+        <div class="auth-logo" aria-hidden="true">
+          <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="64" height="64" rx="12" fill="rgba(88, 166, 255, 0.1)"/>
+            <rect x="1" y="1" width="62" height="62" rx="11" stroke="rgba(88, 166, 255, 0.3)" stroke-width="1"/>
+            <text x="32" y="44" font-size="32" font-weight="600" text-anchor="middle" fill="#58a6ff" font-family="system-ui, sans-serif">C</text>
+          </svg>
+        </div>
+
+        <h1>Claude Code Remote</h1>
+        <p class="subtitle">Connect to your local Claude Code session from anywhere</p>
+
+        <form id="auth-form" onsubmit="return false;">
+          <input
+            type="text"
+            id="token-input"
+            placeholder="Enter auth token"
+            autocomplete="off"
+            autocapitalize="off"
+            autocorrect="off"
+            spellcheck="false"
+            aria-label="Authentication token"
+          >
+          <button id="connect-btn" class="btn-primary" type="submit">
+            <span class="btn-text">Connect</span>
+            <span class="btn-loading" aria-hidden="true">
+              <svg class="spinner" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2" stroke-opacity="0.3"/>
+                <path d="M10 2a8 8 0 0 1 8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+            </span>
+          </button>
+        </form>
+
+        <p id="auth-error" class="error" role="alert" aria-live="polite"></p>
+      </div>
+    </div>
 
-        const urlParams = new URLSearchParams(window.location.search);
-        const token = urlParams.get('token');
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const ws = new WebSocket(`${protocol}//${window.location.host}?token=${token}`);
+    <!-- Main Screen -->
+    <div id="main-screen" class="screen">
+      <!-- Collapsible Header -->
+      <header id="header" role="toolbar" aria-label="Session controls">
+        <div class="header-left">
+          <!-- Mobile: Dropdown -->
+          <select id="session-select" class="mobile-only" aria-label="Select session">
+            <option value="">Select session...</option>
+          </select>
+          <!-- Desktop: Tabs -->
+          <div id="session-tabs" class="session-tabs desktop-only" role="tablist" aria-label="Sessions"></div>
+          <div class="header-left-actions">
+            <button id="new-session-btn" class="btn-icon-minimal" title="Create new session" aria-label="Create new session">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+                <line x1="12" y1="5" x2="12" y2="19"/>
+                <line x1="5" y1="12" x2="19" y2="12"/>
+              </svg>
+            </button>
+            <button id="close-session-btn" class="btn-icon-minimal mobile-only" title="Close current session" aria-label="Close current session">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+                <line x1="18" y1="6" x2="6" y2="18"/>
+                <line x1="6" y1="6" x2="18" y2="18"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="header-right">
+          <div id="reconnect-indicator" class="reconnect-indicator hidden" title="Reconnecting...">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 12a9 9 0 1 1-9-9"/>
+              <polyline points="21 3 21 9 15 9"/>
+            </svg>
+          </div>
+          <button id="attach-btn" class="btn-icon" title="Attach image" aria-label="Attach image">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
+            </svg>
+          </button>
+          <input type="file" id="image-input" accept="image/*" class="hidden" aria-hidden="true">
+          <button id="preview-btn" class="btn-icon" title="Port preview" aria-label="Open port preview">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="2" y="3" width="20" height="14" rx="2"/>
+              <line x1="8" y1="21" x2="16" y2="21"/>
+              <line x1="12" y1="17" x2="12" y2="21"/>
+            </svg>
+          </button>
+          <button id="settings-btn" class="btn-icon" title="Settings" aria-label="Settings">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="3"/>
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+            </svg>
+          </button>
+          <button id="toggle-header-btn-desktop" class="btn-icon desktop-only" title="Toggle header" aria-label="Toggle header visibility" aria-expanded="true">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chevron-icon">
+              <polyline points="18 15 12 9 6 15"/>
+            </svg>
+          </button>
+          <button id="toggle-header-btn" class="btn-icon mobile-only" title="Toggle header" aria-label="Toggle header visibility" aria-expanded="true">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chevron-icon">
+              <polyline points="18 15 12 9 6 15"/>
+            </svg>
+          </button>
+        </div>
+      </header>
 
-        ws.onopen = () => {
-            // term.write('Connected to bridge.\r\n');
-        };
+      <!-- Terminal Container -->
+      <div id="terminal-container" role="application" aria-label="Terminal"></div>
 
-        ws.onmessage = (event) => {
-            term.write(event.data);
-        };
+      <!-- Scroll to bottom button (visible when terminal is scrolled up) -->
+      <button id="scroll-bottom-btn" class="scroll-bottom-btn hidden" title="Scroll to bottom" aria-label="Scroll to bottom">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="6 9 12 15 18 9"/>
+        </svg>
+      </button>
 
-        term.onData((data) => {
-            ws.send(data);
-        });
+      <!-- Mobile Control Keys Toolbar (visible when keyboard is open on mobile) -->
+      <div id="mobile-keys" class="mobile-keys hidden" role="toolbar" aria-label="Control keys">
+        <button type="button" class="mobile-key" data-key="escape" aria-label="Escape">Esc</button>
+        <button type="button" class="mobile-key mobile-key-modifier" data-key="ctrl" aria-label="Control modifier" aria-pressed="false">Ctrl</button>
+        <button type="button" class="mobile-key mobile-key-modifier" data-key="shift" aria-label="Shift modifier" aria-pressed="false">Shift</button>
+        <button type="button" class="mobile-key" data-key="tab" aria-label="Tab">Tab</button>
+        <button type="button" class="mobile-key" data-key="slash" aria-label="Slash">/</button>
+        <button type="button" class="mobile-key" data-key="up" aria-label="Arrow up">↑</button>
+        <button type="button" class="mobile-key" data-key="down" aria-label="Arrow down">↓</button>
+      </div>
 
-        ws.onclose = () => {
-            term.write('\r\nConnection closed.\r\n');
-        };
+      <!-- Floating expand button (visible when header collapsed) -->
+      <button id="expand-header-btn" class="btn-icon floating-btn hidden" title="Show header" aria-label="Show header">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="6 9 12 15 18 9"/>
+        </svg>
+      </button>
 
-        window.addEventListener('resize', () => {
-            fitAddon.fit();
-            if (ws.readyState === WebSocket.OPEN) {
-                ws.send(JSON.stringify({
-                    type: 'resize',
-                    cols: term.cols,
-                    rows: term.rows
-                }));
-            }
-        });
-    </script>
+  </div>
+  <script src="/app.js"></script>
 </body>
 </html>