@hmduc16031996/claude-mb-bridge 2.3.6 → 2.4.0

package/dist/index.js

@@ -6,7 +6,7 @@ const program = new Command();
 program
     .name('claude-mobile-bridge')
     .description('Bridge Claude Code CLI to mobile via WebView')
-    .version('2.3.6')
+    .version('2.4.0')
     .option('--token <token>', 'Pairing token from mobile app')
     .option('--server <url>', 'Backend server URL', 'http://127.0.0.1:3110')
     .option('--path <path>', 'Working directory', process.cwd())

package/dist/server.js

@@ -1,81 +1,250 @@
 import express from 'express';
 import { createServer } from 'http';
-import { WebSocketServer } from 'ws';
+import { WebSocketServer, WebSocket } from 'ws';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { createRequire } from 'module';
+import * as fs from 'fs';
+import * as os from 'os';
+import { randomUUID } from 'crypto';
 const require = createRequire(import.meta.url);
 const pty = require('node-pty');
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+class Session {
+    term;
+    id;
+    cwd;
+    createdAt;
+    constructor(id, cwd, shell) {
+        this.id = id;
+        this.cwd = cwd;
+        this.createdAt = new Date().toISOString();
+        this.term = pty.spawn(shell, [], {
+            name: 'xterm-256color',
+            cols: 120,
+            rows: 40,
+            cwd: cwd,
+            env: {
+                ...process.env,
+                TERM: 'xterm-256color',
+                FORCE_COLOR: '1',
+            }
+        });
+        this.term.write('claude\r');
+    }
+    getInfo() {
+        return {
+            id: this.id,
+            cwd: this.cwd,
+            createdAt: this.createdAt,
+            status: 'running'
+        };
+    }
+    kill() {
+        try {
+            this.term.kill();
+        }
+        catch (e) {
+            console.warn(`Failed to kill pty ${this.id}:`, e);
+        }
+    }
+}
+class SessionManager {
+    sessions = new Map();
+    createSession(cwd) {
+        const id = randomUUID().slice(0, 8);
+        let shell = '/bin/bash';
+        if (process.platform === 'win32') {
+            shell = 'powershell.exe';
+        }
+        else if (process.platform === 'darwin') {
+            shell = fs.existsSync('/bin/zsh') ? '/bin/zsh' : '/bin/bash';
+        }
+        const session = new Session(id, cwd, shell);
+        this.sessions.set(id, session);
+        return session;
+    }
+    getSession(id) {
+        return this.sessions.get(id);
+    }
+    removeSession(id) {
+        const session = this.sessions.get(id);
+        if (session) {
+            session.kill();
+            this.sessions.delete(id);
+        }
+    }
+    listSessions() {
+        return Array.from(this.sessions.values()).map(s => s.getInfo());
+    }
+}
 export function startTerminalServer(port, workingDir, onDisconnect) {
     const app = express();
     const server = createServer(app);
     const wss = new WebSocketServer({ server });
+    const sessionManager = new SessionManager();
     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) => {
-        console.log(`📡 New connection attempt from ${req.socket.remoteAddress}`);
-        console.log('✅ Connection authorized');
-        // Use absolute paths for shells to avoid posix_spawnp failure
-        let shell = '/bin/bash';
-        if (process.platform === 'win32') {
-            shell = 'powershell.exe';
-        }
-        else if (process.platform === 'darwin') {
-            // Prefer zsh on macOS as it's the modern default, fallback to bash
-            shell = require('fs').existsSync('/bin/zsh') ? '/bin/zsh' : '/bin/bash';
-        }
-        console.log(`🚀 Spawning shell: ${shell} in ${workingDir}`);
-        let term;
+    // Directory listing for autocomplete
+    app.get('/api/dirs', (req, res) => {
         try {
-            // Ensure working directory exists
-            if (!require('fs').existsSync(workingDir)) {
-                console.error(`❌ Working directory does not exist: ${workingDir}`);
-                ws.send('\r\n\x1b[31mError: Working directory does not exist\x1b[0m\r\n');
-                ws.close();
-                return;
+            let inputPath = req.query.path || '';
+            if (inputPath.startsWith('~/')) {
+                inputPath = inputPath.replace('~/', `${os.homedir()}/`);
+            }
+            else if (inputPath === '~') {
+                inputPath = os.homedir();
+            }
+            let dirToRead;
+            let prefix;
+            if (inputPath.endsWith('/')) {
+                dirToRead = inputPath;
+                prefix = '';
+            }
+            else {
+                dirToRead = path.dirname(inputPath) || '/';
+                prefix = path.basename(inputPath).toLowerCase();
+            }
+            if (!path.isAbsolute(dirToRead)) {
+                dirToRead = path.resolve(process.cwd(), dirToRead);
             }
-            term = pty.spawn(shell, [], {
-                name: 'xterm-256color',
-                cols: 80,
-                rows: 24,
-                cwd: workingDir,
-                env: process.env
+            const entries = fs.readdirSync(dirToRead, { withFileTypes: true });
+            const dirs = entries
+                .filter(e => e.isDirectory() && !e.name.startsWith('.'))
+                .filter(e => !prefix || e.name.toLowerCase().startsWith(prefix))
+                .slice(0, 20)
+                .map(e => {
+                const fullPath = path.join(dirToRead, e.name);
+                const displayPath = fullPath.startsWith(os.homedir())
+                    ? fullPath.replace(os.homedir(), '~')
+                    : fullPath;
+                return { name: e.name, path: displayPath + '/' };
             });
+            res.json(dirs);
         }
-        catch (err) {
-            console.error(`❌ Failed to spawn terminal: ${err.message}`);
-            ws.send(`\r\n\x1b[31mError: Failed to spawn terminal (${err.message})\x1b[0m\r\n`);
-            ws.close();
-            return;
+        catch {
+            res.json([]);
         }
-        term.write('claude\r');
-        term.onData((data) => {
-            ws.send(data);
-        });
-        ws.on('message', (msg) => {
-            const data = msg.toString();
-            try {
-                const json = JSON.parse(data);
-                if (json.type === 'resize' && json.cols && json.rows) {
-                    term.resize(json.cols, json.rows);
+    });
+    wss.on('connection', (ws, req) => {
+        console.log(`📡 New connection from ${req.socket.remoteAddress}`);
+        let activeSessionId = null;
+        let outputHandler = null;
+        const sendControl = (message) => {
+            if (ws.readyState === WebSocket.OPEN) {
+                ws.send(Buffer.from(JSON.stringify(message)));
+            }
+        };
+        const attachToSession = (sessionId) => {
+            const session = sessionManager.getSession(sessionId);
+            if (!session) {
+                sendControl({ type: 'error', error: 'Session not found' });
+                return;
+            }
+            // Cleanup old handler
+            if (activeSessionId && outputHandler) {
+                const oldSession = sessionManager.getSession(activeSessionId);
+                if (oldSession) {
+                    oldSession.term.off('data', outputHandler);
+                }
+            }
+            activeSessionId = sessionId;
+            outputHandler = (data) => {
+                if (ws.readyState === WebSocket.OPEN) {
+                    ws.send(data); // Send as text
+                }
+            };
+            session.term.on('data', outputHandler);
+            sendControl({ type: 'session:attached', session: session.getInfo() });
+        };
+        // Auto-create initial session if none exist or just use workingDir
+        const initialSession = sessionManager.createSession(workingDir);
+        attachToSession(initialSession.id);
+        ws.on('message', (msg, isBinary) => {
+            if (isBinary) {
+                let message;
+                try {
+                    message = JSON.parse(msg.toString());
+                }
+                catch {
+                    sendControl({ type: 'error', error: 'Invalid control message' });
+                    return;
                 }
-                else {
-                    term.write(data);
+                switch (message.type) {
+                    case 'session:create': {
+                        let cwd = message.cwd || workingDir;
+                        if (cwd.startsWith('~/')) {
+                            cwd = cwd.replace('~/', `${os.homedir()}/`);
+                        }
+                        if (!fs.existsSync(cwd)) {
+                            sendControl({ type: 'error', error: 'Directory not found' });
+                            break;
+                        }
+                        const session = sessionManager.createSession(cwd);
+                        sendControl({ type: 'session:created', session: session.getInfo() });
+                        attachToSession(session.id);
+                        break;
+                    }
+                    case 'session:attach': {
+                        if (message.sessionId) {
+                            attachToSession(message.sessionId);
+                        }
+                        break;
+                    }
+                    case 'session:list': {
+                        sendControl({ type: 'session:list', sessions: sessionManager.listSessions() });
+                        break;
+                    }
+                    case 'resize': {
+                        const session = activeSessionId ? sessionManager.getSession(activeSessionId) : null;
+                        if (session && message.cols && message.rows) {
+                            session.term.resize(message.cols, message.rows);
+                        }
+                        break;
+                    }
+                    case 'image:upload': {
+                        const { data, mimeType, filename } = message;
+                        if (!data)
+                            break;
+                        const ext = mimeType?.split('/')[1] || 'png';
+                        const tempPath = path.join(os.tmpdir(), `claude-bridge-${Date.now()}-${filename || 'image'}.${ext}`);
+                        try {
+                            const buffer = Buffer.from(data, 'base64');
+                            fs.writeFileSync(tempPath, buffer);
+                            sendControl({ type: 'image:uploaded', path: tempPath });
+                        }
+                        catch (err) {
+                            sendControl({ type: 'error', error: 'Failed to save image' });
+                        }
+                        break;
+                    }
+                    case 'session:destroy': {
+                        if (message.sessionId) {
+                            sessionManager.removeSession(message.sessionId);
+                            sendControl({ type: 'session:destroyed', sessionId: message.sessionId });
+                        }
+                        break;
+                    }
                 }
             }
-            catch {
-                term.write(data);
+            else {
+                // Raw text -> forward to active pty
+                const session = activeSessionId ? sessionManager.getSession(activeSessionId) : null;
+                if (session) {
+                    session.term.write(msg.toString());
+                }
             }
         });
-        term.onExit(() => {
-            ws.close();
-        });
         ws.on('close', () => {
-            term.kill();
+            if (activeSessionId && outputHandler) {
+                const session = sessionManager.getSession(activeSessionId);
+                if (session) {
+                    session.term.off('data', outputHandler);
+                }
+            }
             if (onDisconnect)
                 onDisconnect();
         });

package/package.json

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

package/public/app.js

@@ -110,27 +110,47 @@ class ClaudeBridge {
     this.ws = null;
     this.terminal = null;
     this.fitAddon = null;
+    this.serializeAddon = null;
+    this.reconnectTimer = null;
     this.ctrlActive = false;
     this.shiftActive = false;
+    
+    this.sessions = [];
+    this.currentSessionId = null;
+    this.sessionCache = new Map(); // ID -> serialized state
 
     this.initElements();
     this.initTerminal();
     this.bindEvents();
-
-    // Connect immediately
     this.connect();
   }
 
   initElements() {
     this.elements = {
-      mainScreen: document.getElementById('main-screen'),
-      terminalContainer: document.getElementById('terminal-container'),
-      mobileKeys: document.getElementById('mobile-keys'),
       header: document.getElementById('header'),
+      terminalContainer: document.getElementById('terminal-container'),
+      sessionSelect: document.getElementById('session-select'),
+      sessionTabs: document.getElementById('session-tabs'),
+      newSessionBtn: document.getElementById('new-session-btn'),
+      closeSessionBtn: document.getElementById('close-session-btn'),
+      attachBtn: document.getElementById('attach-btn'),
+      imageInput: document.getElementById('image-input'),
+      previewBtn: document.getElementById('preview-btn'),
+      settingsBtn: document.getElementById('settings-btn'),
       toggleHeaderBtn: document.getElementById('toggle-header-btn'),
       toggleHeaderBtnDesktop: document.getElementById('toggle-header-btn-desktop'),
       expandHeaderBtn: document.getElementById('expand-header-btn'),
       scrollBottomBtn: document.getElementById('scroll-bottom-btn'),
+      reconnectIndicator: document.getElementById('reconnect-indicator'),
+      
+      // Modals
+      newSessionModal: document.getElementById('new-session-modal'),
+      cwdInput: document.getElementById('cwd-input'),
+      cwdSuggestions: document.getElementById('cwd-suggestions'),
+      createSessionBtn: document.getElementById('create-session-btn'),
+      cancelSessionBtn: document.getElementById('cancel-session-btn'),
+      settingsModal: document.getElementById('settings-modal'),
+      closeSettingsBtn: document.getElementById('close-settings-btn')
     };
   }
 
@@ -138,49 +158,41 @@ class ClaudeBridge {
     this.terminal = new Terminal({
       cursorBlink: true,
       fontSize: 14,
-      fontFamily: '"JetBrains Mono", monospace',
+      fontFamily: '"JetBrains Mono", Menlo, Monaco, monospace',
       theme: {
-        background: '#262624',
+        background: '#0d1117',
         foreground: '#f0f6fc',
-        cursor: '#f0a500',
+        cursor: '#58a6ff'
       },
-      allowTransparency: true,
-      convertEol: true,
+      allowTransparency: true
     });
 
     this.fitAddon = new FitAddon.FitAddon();
     this.terminal.loadAddon(this.fitAddon);
-    this.terminal.open(this.elements.terminalContainer);
+    this.terminal.loadAddon(new WebLinksAddon.WebLinksAddon());
     
+    this.serializeAddon = new SerializeAddon.SerializeAddon();
+    this.terminal.loadAddon(this.serializeAddon);
+
+    this.terminal.open(this.elements.terminalContainer);
+    this.fitAddon.fit();
+
     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);
+      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+        // Text message = raw terminal input
+        this.ws.send(data);
       }
     });
 
     this.terminal.onResize(({ cols, rows }) => {
-      if (this.ws?.readyState === WebSocket.OPEN) {
-        this.ws.send(JSON.stringify({ type: 'resize', cols, rows }));
-      }
+        this.sendControl({ type: 'resize', cols, rows });
     });
 
     window.addEventListener('resize', () => {
         this.fitAddon.fit();
     });
 
-    this.terminal.onScroll((e) => {
+    this.terminal.onScroll(() => {
         const buffer = this.terminal.buffer.active;
         const isAtBottom = buffer.viewportY >= buffer.baseY;
         this.elements.scrollBottomBtn.classList.toggle('hidden', isAtBottom);
@@ -189,50 +201,263 @@ class ClaudeBridge {
     new TouchScrollManager(this.terminal, this.elements.terminalContainer);
   }
 
+  connect() {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = window.location.host;
+    const urlParams = new URLSearchParams(window.location.search);
+    const token = urlParams.get('token');
+    
+    this.ws = new WebSocket(`${protocol}//${host}${token ? '?token=' + token : ''}`);
+
+    this.ws.onopen = () => {
+      console.log('✅ Connected to bridge');
+      this.elements.reconnectIndicator.classList.add('hidden');
+      if (this.reconnectTimer) {
+        clearInterval(this.reconnectTimer);
+        this.reconnectTimer = null;
+      }
+      this.refreshSessionList();
+    };
+
+    this.ws.onmessage = async (event) => {
+      if (event.data instanceof Blob || event.data instanceof ArrayBuffer) {
+        // Binary message = JSON control
+        const text = await (event.data instanceof Blob ? event.data.text() : new TextDecoder().decode(event.data));
+        try {
+          const message = JSON.parse(text);
+          this.handleControlMessage(message);
+        } catch (e) {
+          console.error('Failed to parse binary message:', e);
+        }
+      } else {
+        // Text message = raw terminal output
+        this.terminal.write(event.data);
+      }
+    };
+
+    this.ws.onclose = () => {
+      console.log('❌ Connection closed');
+      this.elements.reconnectIndicator.classList.remove('hidden');
+      if (!this.reconnectTimer) {
+        this.reconnectTimer = setInterval(() => this.connect(), 3000);
+      }
+    };
+  }
+
+  handleControlMessage(message) {
+    switch (message.type) {
+      case 'session:attached':
+        this.currentSessionId = message.session.id;
+        this.updateUI();
+        break;
+      case 'session:created':
+        this.refreshSessionList();
+        this.hideNewSessionModal();
+        break;
+      case 'session:list':
+        this.sessions = message.sessions;
+        this.renderSessions();
+        break;
+      case 'image:uploaded':
+        // Paste the path into terminal (usually for /attach command)
+        this.terminal.focus();
+        this.terminal.paste(message.path);
+        break;
+      case 'session:destroyed':
+        if (message.sessionId === this.currentSessionId) {
+            this.currentSessionId = null;
+            this.terminal.clear();
+        }
+        this.refreshSessionList();
+        break;
+      case 'error':
+        this.terminal.writeln(`\r\n\x1b[31mError: ${message.error}\x1b[0m`);
+        break;
+    }
+  }
+
+  sendControl(message) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(message));
+    }
+  }
+
+  refreshSessionList() {
+    this.sendControl({ type: 'session:list' });
+  }
+
+  renderSessions() {
+    // Render Mobile Dropdown
+    this.elements.sessionSelect.innerHTML = '<option value="">Select session...</option>';
+    this.sessions.forEach(s => {
+      const option = document.createElement('option');
+      option.value = s.id;
+      option.textContent = s.cwd.split('/').pop() || '/';
+      if (s.id === this.currentSessionId) option.selected = true;
+      this.elements.sessionSelect.appendChild(option);
+    });
+
+    // Render Desktop Tabs
+    this.elements.sessionTabs.innerHTML = '';
+    this.sessions.forEach(s => {
+      const tab = document.createElement('button');
+      tab.className = 'session-tab';
+      if (s.id === this.currentSessionId) tab.setAttribute('aria-selected', 'true');
+      
+      const name = document.createElement('span');
+      name.className = 'session-tab-name';
+      name.textContent = s.cwd.split('/').pop() || '/';
+      tab.appendChild(name);
+
+      const close = document.createElement('span');
+      close.className = 'session-tab-close';
+      close.innerHTML = '&times;';
+      close.onclick = (e) => {
+          e.stopPropagation();
+          this.destroySession(s.id);
+      };
+      tab.appendChild(close);
+
+      tab.onclick = () => this.attachSession(s.id);
+      this.elements.sessionTabs.appendChild(tab);
+    });
+  }
+
+  attachSession(id) {
+    if (id === this.currentSessionId) return;
+    this.sendControl({ type: 'session:attach', sessionId: id });
+  }
+
+  destroySession(id) {
+    if (confirm('Are you sure you want to close this session?')) {
+        this.sendControl({ type: 'session:destroy', sessionId: id });
+    }
+  }
+
+  updateUI() {
+    this.renderSessions();
+  }
+
   bindEvents() {
+    // Mobile Keys
     document.querySelectorAll('.mobile-key').forEach(btn => {
-      btn.addEventListener('click', (e) => {
+      btn.addEventListener('click', () => {
         const key = btn.dataset.key;
         switch (key) {
-          case 'escape': this.terminal.focus(); this.ws.send('\x1b'); break;
+          case 'escape': this.terminal.focus(); this.terminal.onData('\x1b'); break; // Simulated ESC
           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;
+          case 'tab': this.terminal.onData('\t'); break;
+          case 'up': this.terminal.onData('\x1b[A'); break;
+          case 'down': this.terminal.onData('\x1b[B'); break;
+          case 'slash': this.terminal.onData('/'); break;
         }
       });
     });
-    
+
     // Header Toggle
     const handleToggleHeader = () => {
         const isCollapsed = this.elements.header.classList.toggle('collapsed');
         this.elements.expandHeaderBtn.classList.toggle('hidden', !isCollapsed);
-        this.elements.toggleHeaderBtn.setAttribute('aria-expanded', !isCollapsed);
-        this.elements.toggleHeaderBtnDesktop.setAttribute('aria-expanded', !isCollapsed);
         setTimeout(() => this.fitAddon.fit(), 200);
     };
+    [this.elements.toggleHeaderBtn, this.elements.toggleHeaderBtnDesktop, this.elements.expandHeaderBtn].forEach(btn => {
+        btn?.addEventListener('click', handleToggleHeader);
+    });
 
-    this.elements.toggleHeaderBtn.addEventListener('click', handleToggleHeader);
-    this.elements.toggleHeaderBtnDesktop.addEventListener('click', handleToggleHeader);
-    this.elements.expandHeaderBtn.addEventListener('click', handleToggleHeader);
-
-    // Scroll to Bottom
+    // Scroll Bottom
     this.elements.scrollBottomBtn.addEventListener('click', () => {
         this.terminal.scrollToBottom();
-        this.elements.scrollBottomBtn.classList.add('hidden');
     });
 
-    // Stubs for other buttons
-    ['new-session-btn', 'attach-btn', 'preview-btn', 'settings-btn'].forEach(id => {
-        const btn = document.getElementById(id);
-        if (btn) {
-            btn.addEventListener('click', () => {
-                console.log(`Button ${id} clicked (not implemented in bridge)`);
-            });
-        }
+    // Attach File
+    this.elements.attachBtn.addEventListener('click', () => this.elements.imageInput.click());
+    this.elements.imageInput.addEventListener('change', (e) => {
+        const file = e.target.files[0];
+        if (file) this.handleImageAttachment(file);
     });
+
+    // New Session
+    this.elements.newSessionBtn.addEventListener('click', () => this.showNewSessionModal());
+    this.elements.cancelSessionBtn.addEventListener('click', () => this.hideNewSessionModal());
+    this.elements.createSessionBtn.addEventListener('click', () => {
+        const cwd = this.elements.cwdInput.value;
+        this.sendControl({ type: 'session:create', cwd });
+    });
+
+    // Settings
+    this.elements.settingsBtn.addEventListener('click', () => this.elements.settingsModal.classList.remove('hidden'));
+    this.elements.closeSettingsBtn.addEventListener('click', () => this.elements.settingsModal.classList.add('hidden'));
+
+    // Directory Autocomplete
+    this.elements.cwdInput.addEventListener('input', () => this.onCwdInput());
+
+    // Paste handling for images
+    document.addEventListener('paste', (e) => this.handlePaste(e));
+  }
+
+  handleImageAttachment(file) {
+    if (!file || !file.type.startsWith('image/')) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const base64 = reader.result.split(',')[1];
+      this.sendControl({
+        type: 'image:upload',
+        data: base64,
+        filename: file.name,
+        mimeType: file.type
+      });
+    };
+    reader.readAsDataURL(file);
+  }
+
+  handlePaste(e) {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        const file = items[i].getAsFile();
+        this.handleImageAttachment(file);
+        break;
+      }
+    }
+  }
+
+  onCwdInput() {
+    const path = this.elements.cwdInput.value;
+    if (path.length < 1) {
+        this.elements.cwdSuggestions.classList.add('hidden');
+        return;
+    }
+    fetch(`/api/dirs?path=${encodeURIComponent(path)}`)
+        .then(res => res.json())
+        .then(dirs => {
+            this.elements.cwdSuggestions.innerHTML = '';
+            if (dirs.length === 0) {
+                this.elements.cwdSuggestions.classList.add('hidden');
+                return;
+            }
+            dirs.forEach(dir => {
+                const li = document.createElement('li');
+                li.textContent = dir.path;
+                li.onclick = () => {
+                    this.elements.cwdInput.value = dir.path;
+                    this.elements.cwdSuggestions.classList.add('hidden');
+                };
+                this.elements.cwdSuggestions.appendChild(li);
+            });
+            this.elements.cwdSuggestions.classList.remove('hidden');
+        });
+  }
+
+  showNewSessionModal() {
+    this.elements.cwdInput.value = '';
+    this.elements.newSessionModal.classList.remove('hidden');
+    this.elements.cwdInput.focus();
+  }
+
+  hideNewSessionModal() {
+    this.elements.newSessionModal.classList.add('hidden');
   }
 
   setCtrlActive(active) {
@@ -244,34 +469,32 @@ class ClaudeBridge {
     this.shiftActive = active;
     document.querySelector('[data-key="shift"]').classList.toggle('active', active);
   }
+}
 
-  connect() {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    this.ws = new WebSocket(`${protocol}//${window.location.host}`);
-
-    this.ws.onopen = () => {
-      console.log('✅ Connected to terminal');
-      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 = () => {
-        console.log('❌ Connection closed');
-        // Show offline state in terminal
-        this.terminal.write('\r\n\x1b[31m❌ Connection closed\x1b[0m\r\n');
-    };
-
-    this.ws.onerror = () => {
-        console.error('⚠️ Connection error');
-    };
-  }
+// Minimal TouchScrollManager
+class TouchScrollManager {
+    constructor(terminal, container) {
+        this.terminal = terminal;
+        this.container = container;
+        this.bindEvents();
+    }
+    bindEvents() {
+        let lastY = 0;
+        this.container.addEventListener('touchstart', (e) => {
+            if (e.touches.length === 1) lastY = e.touches[0].clientY;
+        }, { passive: true });
+        this.container.addEventListener('touchmove', (e) => {
+            if (e.touches.length === 1) {
+                const delta = lastY - e.touches[0].clientY;
+                if (Math.abs(delta) > 5) {
+                    this.terminal.scrollLines(Math.sign(delta));
+                    lastY = e.touches[0].clientY;
+                }
+            }
+        }, { passive: true });
+    }
 }
 
-// Initialize on load
-window.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', () => {
   new ClaudeBridge();
 });

package/public/index.html

@@ -120,6 +120,55 @@
         </svg>
       </button>
 
+    </div>
+
+    <!-- New Session Modal -->
+    <div id="new-session-modal" class="modal hidden" role="dialog" aria-labelledby="modal-title" aria-modal="true">
+      <div class="modal-content">
+        <h2 id="modal-title">New Session</h2>
+        <p class="modal-description">Create a new terminal session with optional working directory.</p>
+        <div class="autocomplete-wrapper">
+          <input
+            type="text"
+            id="cwd-input"
+            placeholder="Working directory (leave empty for current)"
+            autocomplete="off"
+            autocapitalize="off"
+            autocorrect="off"
+            spellcheck="false"
+            aria-label="Working directory path"
+          >
+          <ul id="cwd-suggestions" class="suggestions hidden" role="listbox"></ul>
+        </div>
+        <div class="modal-actions">
+          <button id="cancel-session-btn" class="btn-secondary">Cancel</button>
+          <button id="create-session-btn" class="btn-primary">Create</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Settings Modal -->
+    <div id="settings-modal" class="modal hidden" role="dialog" aria-labelledby="settings-title" aria-modal="true">
+      <div class="modal-content settings-content">
+        <div class="modal-header">
+          <h2 id="settings-title">Settings</h2>
+          <button id="close-settings-btn" class="btn-icon" aria-label="Close settings">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+        <div class="setting-row">
+          <div class="setting-info">
+            <label>Bridge Status</label>
+            <p class="setting-description">Version 2.3.6 (Release)</p>
+          </div>
+          <span class="status-tag">Active</span>
+        </div>
+      </div>
+    </div>
+
   </div>
   <script src="/app.js"></script>
 </body>