aigo 1.0.0

package/public/terminal.js

@@ -0,0 +1,759 @@
+/**
+ * vigo terminal client
+ * Connects to the WebSocket server and renders the terminal
+ */
+
+(function() {
+  'use strict';
+  
+  // Wait for DOM to be ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+  
+  function init() {
+    // Extract token from URL path: /t/:token
+    const pathParts = window.location.pathname.split('/');
+    const tokenIndex = pathParts.indexOf('t') + 1;
+    const token = pathParts[tokenIndex];
+    
+    if (!token) {
+      document.body.innerHTML = '<div style="color: #ff4444; padding: 20px;">Error: Invalid URL. Token not found.</div>';
+      return;
+    }
+    
+    // Check if xterm.js is loaded
+    if (typeof Terminal === 'undefined') {
+      document.body.innerHTML = '<div style="color: #ff4444; padding: 20px;">Error: Terminal library failed to load. Please refresh.</div>';
+      console.error('Terminal (xterm.js) is not defined. Check CDN script loading.');
+      return;
+    }
+    
+    // DOM elements
+    const terminalEl = document.getElementById('terminal');
+    const statusEl = document.getElementById('status');
+    const statusText = statusEl.querySelector('.text');
+    const overlay = document.getElementById('reconnect-overlay');
+    const overlayMessage = overlay.querySelector('.message');
+    const reconnectBtn = document.getElementById('reconnect-btn');
+    const authOverlay = document.getElementById('auth-overlay');
+    const passwordInput = document.getElementById('password-input');
+    const authBtn = document.getElementById('auth-btn');
+    const authError = document.getElementById('auth-error');
+    const authTitle = authOverlay.querySelector('.auth-title');
+    const exitBtn = document.getElementById('exit-btn');
+    const exitOverlay = document.getElementById('exit-overlay');
+    const exitCancel = document.getElementById('exit-cancel');
+    const exitConfirm = document.getElementById('exit-confirm');
+    const mobileControls = document.getElementById('mobile-controls');
+    const mobileToggleBtn = document.getElementById('mobile-mode-toggle');
+    const mobileEnterBtn = document.getElementById('mobile-enter-btn');
+    const mobileStopBtn = document.getElementById('mobile-stop-btn');
+    const mobileExitBtn = document.getElementById('mobile-exit-btn');
+    
+    // Terminal setup
+    const terminal = new Terminal({
+      theme: {
+        background: '#0a0a0f',
+        foreground: '#e0e0e0',
+        cursor: '#00ff88',
+        cursorAccent: '#0a0a0f',
+        selectionBackground: 'rgba(0, 255, 136, 0.3)',
+        black: '#1a1a25',
+        red: '#ff5555',
+        green: '#00ff88',
+        yellow: '#ffaa00',
+        blue: '#66aaff',
+        magenta: '#ff79c6',
+        cyan: '#00ffff',
+        white: '#e0e0e0',
+        brightBlack: '#555555',
+        brightRed: '#ff6e6e',
+        brightGreen: '#69ff94',
+        brightYellow: '#ffffa5',
+        brightBlue: '#d6acff',
+        brightMagenta: '#ff92df',
+        brightCyan: '#a4ffff',
+        brightWhite: '#ffffff'
+      },
+      fontFamily: '"SF Mono", "Fira Code", "JetBrains Mono", "Cascadia Code", Menlo, Monaco, monospace',
+      fontSize: 14,
+      lineHeight: 1.2,
+      cursorBlink: true,
+      cursorStyle: 'block',
+      scrollback: 10000,
+      allowProposedApi: true
+    });
+    
+    // Load addons (check for different possible global names)
+    const FitAddonClass = window.FitAddon?.FitAddon || window.FitAddon;
+    const WebLinksAddonClass = window.WebLinksAddon?.WebLinksAddon || window.WebLinksAddon;
+    
+    let fitAddon = null;
+    if (FitAddonClass) {
+      fitAddon = new FitAddonClass();
+      terminal.loadAddon(fitAddon);
+    } else {
+      console.warn('FitAddon not available');
+    }
+    
+    if (WebLinksAddonClass) {
+      const webLinksAddon = new WebLinksAddonClass();
+      terminal.loadAddon(webLinksAddon);
+    }
+    
+    // Open terminal in DOM
+    terminal.open(terminalEl);
+    if (fitAddon) {
+      fitAddon.fit();
+    }
+    
+    // WebSocket connection
+    let ws = null;
+    let reconnectAttempts = 0;
+    let reconnectTimer = null;
+    let authenticated = false;
+    let savedPassword = null;
+    let isLocked = false;
+    const MAX_RECONNECT_ATTEMPTS = 10;
+    const RECONNECT_DELAY = 2000;
+    
+    // Timeout config (received from server)
+    let lockTimeout = 15;  // minutes, 0 = disabled
+    let exitTimeout = 30;  // minutes, 0 = disabled
+    
+    // Activity tracking
+    let lastActivityTime = Date.now();
+    let lockCheckTimer = null;
+    let activityPingTimer = null;
+    
+    // Browser notifications
+    let notificationsEnabled = false;
+    let lastNotificationTime = 0;
+    const NOTIFICATION_COOLDOWN = 30000; // 30 seconds between notifications
+    
+    // Mobile device detection
+    function isMobileDevice() {
+      // Check for touch capability
+      const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+      // Check for mobile user agent
+      const mobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+      // Check screen width
+      const smallScreen = window.innerWidth <= 768;
+      // Consider coarse pointer (touch screens)
+      const coarsePointer = window.matchMedia('(pointer: coarse)').matches;
+      
+      return (hasTouch && (mobileUA || smallScreen)) || coarsePointer;
+    }
+    
+    // Show/hide mobile control buttons
+    function updateMobileControlsVisibility() {
+      if (isMobileDevice() && authenticated && !isLocked) {
+        mobileControls.classList.add('visible');
+      } else {
+        mobileControls.classList.remove('visible');
+      }
+    }
+    
+    // Alias for backward compatibility
+    const updateMobileToggleVisibility = updateMobileControlsVisibility;
+    
+    // Patterns that indicate Claude is waiting for input or finished
+    const idlePatterns = [
+      />\s*$/,                          // Shell prompt
+      /\$\s*$/,                         // Bash prompt
+      /claude>\s*$/i,                   // Claude prompt
+      /waiting for input/i,
+      /press enter to continue/i,
+      /\[Y\/n\]/i,                      // Confirmation prompt
+      /completed successfully/i,
+      /finished/i,
+      /done\./i
+    ];
+    
+    // Update activity timestamp
+    function updateActivity() {
+      lastActivityTime = Date.now();
+      
+      // If locked, don't auto-unlock (need password)
+      // But do send activity to server
+      if (ws && ws.readyState === WebSocket.OPEN && authenticated) {
+        ws.send(JSON.stringify({ type: 'activity' }));
+      }
+    }
+    
+    // Check for lock timeout
+    function startLockChecker() {
+      if (lockCheckTimer) clearInterval(lockCheckTimer);
+      if (lockTimeout <= 0) return;
+      
+      lockCheckTimer = setInterval(() => {
+        if (!authenticated || isLocked) return;
+        
+        const inactiveMinutes = (Date.now() - lastActivityTime) / 1000 / 60;
+        if (inactiveMinutes >= lockTimeout) {
+          lockSession();
+        }
+      }, 10000); // Check every 10 seconds
+    }
+    
+    // Lock the session (show password prompt)
+    function lockSession() {
+      if (isLocked) return;
+      isLocked = true;
+      authTitle.textContent = 'Session Locked';
+      showAuth();
+      setStatus('disconnected', 'Locked');
+      updateMobileToggleVisibility();
+    }
+    
+    // Unlock the session
+    function unlockSession() {
+      isLocked = false;
+      authTitle.textContent = 'Enter Password';
+      hideAuth();
+      setStatus('connected', 'Connected');
+      terminal.focus();
+      updateActivity();
+      updateMobileToggleVisibility();
+    }
+    
+    // Track user interactions
+    function setupActivityTracking() {
+      const events = ['mousemove', 'mousedown', 'keydown', 'touchstart', 'scroll'];
+      events.forEach(event => {
+        document.addEventListener(event, () => {
+          if (!isLocked && authenticated) {
+            updateActivity();
+          }
+          // Request notification permission on first interaction
+          requestNotificationPermission();
+        }, { passive: true, once: event === 'keydown' || event === 'mousedown' });
+      });
+    }
+    
+    // Request notification permission
+    function requestNotificationPermission() {
+      if (!('Notification' in window)) return;
+      if (Notification.permission === 'granted') {
+        notificationsEnabled = true;
+        return;
+      }
+      if (Notification.permission !== 'denied') {
+        Notification.requestPermission().then(permission => {
+          notificationsEnabled = permission === 'granted';
+        });
+      }
+    }
+    
+    // Show browser notification
+    function showNotification(title, body) {
+      if (!notificationsEnabled) return;
+      if (document.visibilityState === 'visible') return; // Don't notify if tab is active
+      
+      const now = Date.now();
+      if (now - lastNotificationTime < NOTIFICATION_COOLDOWN) return;
+      lastNotificationTime = now;
+      
+      try {
+        const notification = new Notification(title, {
+          body: body,
+          icon: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">▸</text></svg>',
+          tag: 'vigo-notification',
+          requireInteraction: false
+        });
+        
+        notification.onclick = () => {
+          window.focus();
+          notification.close();
+        };
+        
+        // Auto-close after 5 seconds
+        setTimeout(() => notification.close(), 5000);
+      } catch (e) {
+        console.warn('Failed to show notification:', e);
+      }
+    }
+    
+    // Check terminal output for idle patterns
+    let outputBuffer = '';
+    function checkForIdlePatterns(data) {
+      // Add to buffer (keep last 500 chars)
+      outputBuffer += data;
+      if (outputBuffer.length > 500) {
+        outputBuffer = outputBuffer.slice(-500);
+      }
+      
+      // Check patterns
+      for (const pattern of idlePatterns) {
+        if (pattern.test(outputBuffer)) {
+          showNotification('vigo', 'Claude Code is waiting for input');
+          outputBuffer = ''; // Reset to avoid repeated notifications
+          return;
+        }
+      }
+    }
+    
+    function showAuth() {
+      authOverlay.classList.add('visible');
+      authError.textContent = '';
+      passwordInput.value = '';
+      passwordInput.focus();
+    }
+    
+    function hideAuth() {
+      authOverlay.classList.remove('visible');
+    }
+    
+    function submitPassword() {
+      const pwd = passwordInput.value.trim();
+      if (pwd.length === 0) {
+        authError.textContent = 'Password required';
+        return;
+      }
+      authError.textContent = '';
+      
+      if (isLocked) {
+        // Re-auth for unlock
+        ws.send(JSON.stringify({
+          type: 're-auth',
+          password: pwd
+        }));
+      } else {
+        // Initial auth
+        savedPassword = pwd;
+        const dimensions = fitAddon ? fitAddon.proposeDimensions() : { cols: 80, rows: 24 };
+        ws.send(JSON.stringify({
+          type: 'auth',
+          password: pwd,
+          cols: dimensions?.cols || 80,
+          rows: dimensions?.rows || 24
+        }));
+      }
+    }
+    
+    // Auth button and enter key
+    authBtn.addEventListener('click', submitPassword);
+    passwordInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') submitPassword();
+    });
+    
+    // Exit/cleanup functionality
+    function showExitConfirm() {
+      exitOverlay.classList.add('visible');
+    }
+    
+    function hideExitConfirm() {
+      exitOverlay.classList.remove('visible');
+      terminal.focus();
+    }
+    
+    function requestCleanup() {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        exitOverlay.classList.remove('visible');
+        showOverlay(true, 'Cleaning up session...');
+        ws.send(JSON.stringify({ type: 'cleanup' }));
+      }
+    }
+    
+    function showCleanupComplete() {
+      hideAuth();
+      showOverlay(false);
+      
+      const completeDiv = document.createElement('div');
+      completeDiv.id = 'cleanup-overlay';
+      completeDiv.innerHTML = `
+        <div class="cleanup-box">
+          <div class="cleanup-icon">✓</div>
+          <div class="cleanup-title">Session Ended</div>
+          <div class="cleanup-message">The session has been cleaned up.<br>tmux session killed, server stopped.</div>
+          <button onclick="window.close()">Close Window</button>
+        </div>
+      `;
+      completeDiv.style.cssText = `
+        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+        background: #0a0a0f; display: flex; justify-content: center;
+        align-items: center; z-index: 300;
+      `;
+      const box = completeDiv.querySelector('.cleanup-box');
+      box.style.cssText = `
+        background: #12121a; border: 1px solid #1a1a25; border-radius: 8px;
+        padding: 40px; text-align: center;
+      `;
+      const icon = completeDiv.querySelector('.cleanup-icon');
+      icon.style.cssText = 'font-size: 48px; margin-bottom: 16px; color: #00ff88;';
+      const title = completeDiv.querySelector('.cleanup-title');
+      title.style.cssText = 'color: #00ff88; font-size: 20px; font-weight: 600; margin-bottom: 12px;';
+      const msg = completeDiv.querySelector('.cleanup-message');
+      msg.style.cssText = 'color: #888; margin-bottom: 24px; line-height: 1.5;';
+      const btn = completeDiv.querySelector('button');
+      btn.style.cssText = `
+        padding: 12px 32px; background: #1a1a25; color: #e0e0e0;
+        border: 1px solid #2a2a35; border-radius: 4px; cursor: pointer;
+        font-family: inherit; font-size: 14px;
+      `;
+      
+      document.body.appendChild(completeDiv);
+    }
+    
+    // Exit button handlers
+    exitBtn.addEventListener('click', showExitConfirm);
+    exitCancel.addEventListener('click', hideExitConfirm);
+    exitConfirm.addEventListener('click', requestCleanup);
+    
+    // Helper for mobile button visual feedback
+    function mobileButtonFeedback(btn) {
+      btn.style.transform = 'scale(0.95)';
+      setTimeout(() => {
+        btn.style.transform = '';
+      }, 100);
+    }
+    
+    // Mobile mode toggle button handler (sends Shift+Tab)
+    mobileToggleBtn.addEventListener('click', () => {
+      if (ws && ws.readyState === WebSocket.OPEN && authenticated && !isLocked) {
+        // Send Shift+Tab escape sequence: ESC [ Z (reverse tab / backtab)
+        // This is the standard escape sequence for Shift+Tab
+        ws.send('\x1b[Z');
+        updateActivity();
+        mobileButtonFeedback(mobileToggleBtn);
+        terminal.focus();
+      }
+    });
+    
+    // Mobile enter button handler (sends Enter key)
+    mobileEnterBtn.addEventListener('click', () => {
+      if (ws && ws.readyState === WebSocket.OPEN && authenticated && !isLocked) {
+        // Send Enter key (carriage return)
+        ws.send('\r');
+        updateActivity();
+        mobileButtonFeedback(mobileEnterBtn);
+        terminal.focus();
+      }
+    });
+    
+    // Mobile stop button handler (sends Ctrl+C)
+    mobileStopBtn.addEventListener('click', () => {
+      if (ws && ws.readyState === WebSocket.OPEN && authenticated && !isLocked) {
+        // Send Ctrl+C (ASCII code 3, ETX - End of Text)
+        ws.send('\x03');
+        updateActivity();
+        mobileButtonFeedback(mobileStopBtn);
+        terminal.focus();
+      }
+    });
+    
+    // Mobile exit button handler (shows confirmation dialog)
+    mobileExitBtn.addEventListener('click', () => {
+      if (authenticated && !isLocked) {
+        mobileButtonFeedback(mobileExitBtn);
+        showExitConfirm();
+      }
+    });
+    
+    // ESC to close exit confirm
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && exitOverlay.classList.contains('visible')) {
+        hideExitConfirm();
+      }
+    });
+    
+    function setStatus(status, text) {
+      statusEl.className = status;
+      statusText.textContent = text;
+    }
+    
+    function showOverlay(show, message = '', showButton = false) {
+      if (show) {
+        overlay.classList.add('visible');
+        overlayMessage.textContent = message;
+        reconnectBtn.style.display = showButton ? 'block' : 'none';
+      } else {
+        overlay.classList.remove('visible');
+      }
+    }
+    
+    function showSessionExpired() {
+      hideAuth();
+      showOverlay(false);
+      
+      // Create expired overlay
+      const expiredDiv = document.createElement('div');
+      expiredDiv.id = 'expired-overlay';
+      expiredDiv.innerHTML = `
+        <div class="expired-box">
+          <div class="expired-icon">⏱</div>
+          <div class="expired-title">Session Expired</div>
+          <div class="expired-message">The session was closed due to inactivity.</div>
+          <button onclick="window.close()">Close Window</button>
+        </div>
+      `;
+      expiredDiv.style.cssText = `
+        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+        background: #0a0a0f; display: flex; justify-content: center;
+        align-items: center; z-index: 300;
+      `;
+      const box = expiredDiv.querySelector('.expired-box');
+      box.style.cssText = `
+        background: #12121a; border: 1px solid #1a1a25; border-radius: 8px;
+        padding: 40px; text-align: center;
+      `;
+      const icon = expiredDiv.querySelector('.expired-icon');
+      icon.style.cssText = 'font-size: 48px; margin-bottom: 16px;';
+      const title = expiredDiv.querySelector('.expired-title');
+      title.style.cssText = 'color: #ff5555; font-size: 20px; font-weight: 600; margin-bottom: 12px;';
+      const msg = expiredDiv.querySelector('.expired-message');
+      msg.style.cssText = 'color: #888; margin-bottom: 24px;';
+      const btn = expiredDiv.querySelector('button');
+      btn.style.cssText = `
+        padding: 12px 32px; background: #1a1a25; color: #e0e0e0;
+        border: 1px solid #2a2a35; border-radius: 4px; cursor: pointer;
+        font-family: inherit; font-size: 14px;
+      `;
+      
+      document.body.appendChild(expiredDiv);
+    }
+    
+    function connect() {
+      // Build WebSocket URL
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const wsUrl = `${protocol}//${window.location.host}/ws/${token}`;
+      
+      setStatus('connecting', 'Connecting...');
+      
+      try {
+        ws = new WebSocket(wsUrl);
+      } catch (err) {
+        console.error('Failed to create WebSocket:', err);
+        setStatus('disconnected', 'Connection failed');
+        scheduleReconnect();
+        return;
+      }
+      
+      ws.onopen = () => {
+        console.log('WebSocket connected');
+        setStatus('connecting', 'Authenticating...');
+        showOverlay(false);
+        reconnectAttempts = 0;
+      };
+      
+      ws.onmessage = (event) => {
+        const data = event.data;
+        
+        // Check for JSON control messages
+        if (data.startsWith('{')) {
+          try {
+            const msg = JSON.parse(data);
+            
+            if (msg.type === 'auth_required') {
+              if (savedPassword && !isLocked) {
+                const dimensions = fitAddon ? fitAddon.proposeDimensions() : { cols: 80, rows: 24 };
+                ws.send(JSON.stringify({
+                  type: 'auth',
+                  password: savedPassword,
+                  cols: dimensions?.cols || 80,
+                  rows: dimensions?.rows || 24
+                }));
+              } else {
+                authTitle.textContent = 'Enter Password';
+                showAuth();
+              }
+              return;
+            }
+            
+            if (msg.type === 'auth_success') {
+              // Get config if provided
+              if (msg.config) {
+                lockTimeout = msg.config.lockTimeout || 15;
+                exitTimeout = msg.config.exitTimeout || 30;
+              }
+              
+              if (isLocked) {
+                // Unlock successful
+                unlockSession();
+              } else {
+                // Initial auth successful
+                authenticated = true;
+                hideAuth();
+                setStatus('connected', 'Connected');
+                terminal.focus();
+                updateActivity();
+                startLockChecker();
+                setupActivityTracking();
+                updateMobileToggleVisibility();
+              }
+              return;
+            }
+            
+            if (msg.type === 'auth_failed') {
+              authError.textContent = 'Invalid password';
+              if (!isLocked) {
+                savedPassword = null;
+              }
+              passwordInput.value = '';
+              passwordInput.focus();
+              return;
+            }
+            
+            if (msg.type === 'session_expired') {
+              showSessionExpired();
+              return;
+            }
+            
+            if (msg.type === 'cleanup_complete') {
+              showCleanupComplete();
+              return;
+            }
+          } catch {
+            // Not JSON, treat as terminal data
+          }
+        }
+        
+        // Write terminal data
+        terminal.write(data);
+        
+        // Check for idle patterns (for notifications)
+        checkForIdlePatterns(data);
+      };
+      
+      ws.onclose = (event) => {
+        console.log('WebSocket closed:', event.code, event.reason);
+        setStatus('disconnected', 'Disconnected');
+        authenticated = false;
+        isLocked = false;
+        hideAuth();
+        updateMobileToggleVisibility();
+        
+        if (lockCheckTimer) clearInterval(lockCheckTimer);
+        
+        if (event.code !== 1000) {
+          // Notify user of unexpected disconnect
+          showNotification('vigo', 'Connection lost. Attempting to reconnect...');
+          scheduleReconnect();
+        } else {
+          showOverlay(true, 'Session ended.', true);
+        }
+      };
+      
+      ws.onerror = (error) => {
+        console.error('WebSocket error:', error);
+      };
+    }
+    
+    function scheduleReconnect() {
+      if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
+        showOverlay(true, 'Connection failed. Please check your network.', true);
+        return;
+      }
+      
+      reconnectAttempts++;
+      const delay = RECONNECT_DELAY * Math.min(reconnectAttempts, 5);
+      
+      showOverlay(true, `Reconnecting in ${delay / 1000}s... (attempt ${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})`);
+      
+      clearTimeout(reconnectTimer);
+      reconnectTimer = setTimeout(() => {
+        showOverlay(true, 'Reconnecting...');
+        connect();
+      }, delay);
+    }
+    
+    function sendResize() {
+      if (ws && ws.readyState === WebSocket.OPEN && fitAddon && authenticated && !isLocked) {
+        const dimensions = fitAddon.proposeDimensions();
+        if (dimensions) {
+          ws.send(JSON.stringify({
+            type: 'resize',
+            cols: dimensions.cols,
+            rows: dimensions.rows
+          }));
+        }
+      }
+    }
+    
+    // Handle terminal input
+    terminal.onData((data) => {
+      if (ws && ws.readyState === WebSocket.OPEN && authenticated && !isLocked) {
+        updateActivity();
+        ws.send(data);
+      }
+    });
+    
+    // Handle window resize
+    let resizeTimer = null;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        if (fitAddon) {
+          fitAddon.fit();
+        }
+        sendResize();
+        updateMobileToggleVisibility();
+      }, 100);
+    });
+    
+    // Handle terminal resize
+    terminal.onResize(({ cols, rows }) => {
+      if (ws && ws.readyState === WebSocket.OPEN && authenticated && !isLocked) {
+        ws.send(JSON.stringify({ type: 'resize', cols, rows }));
+      }
+    });
+    
+    // Reconnect button handler
+    reconnectBtn.addEventListener('click', () => {
+      reconnectAttempts = 0;
+      showOverlay(true, 'Connecting...');
+      connect();
+    });
+    
+    // Handle visibility change - reconnect when tab becomes visible
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') {
+        if (!ws || ws.readyState !== WebSocket.OPEN) {
+          reconnectAttempts = 0;
+          connect();
+        } else if (authenticated && !isLocked) {
+          // Check if we should be locked
+          const inactiveMinutes = (Date.now() - lastActivityTime) / 1000 / 60;
+          if (lockTimeout > 0 && inactiveMinutes >= lockTimeout) {
+            lockSession();
+          }
+        }
+      }
+    });
+    
+    // Mobile keyboard handling
+    if (terminal.textarea) {
+      terminal.textarea.addEventListener('focus', () => {
+        setTimeout(() => {
+          terminalEl.scrollIntoView({ behavior: 'smooth', block: 'end' });
+        }, 300);
+      });
+    }
+    
+    // Initial connection
+    connect();
+    
+    // Expose for debugging
+    window.vigoTerminal = {
+      terminal,
+      fitAddon,
+      reconnect: () => {
+        reconnectAttempts = 0;
+        if (ws) ws.close();
+        connect();
+      },
+      lock: lockSession,
+      getActivity: () => ({
+        lastActivityTime,
+        inactiveMinutes: (Date.now() - lastActivityTime) / 1000 / 60,
+        lockTimeout,
+        exitTimeout,
+        isLocked,
+        authenticated
+      })
+    };
+  }
+})();