Add: free scroll, keyboard resize, modifier keys box

static/index.html

@@ -5,20 +5,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
   <title>OpenCode AI Terminal</title>
   
-  <!-- PWA Meta -->
   <meta name="theme-color" content="#27c93f"/>
   <meta name="apple-mobile-web-app-capable" content="yes"/>
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
   <meta name="apple-mobile-web-app-title" content="OpenCode"/>
   <meta name="description" content="Full screen web terminal"/>
   
-  <!-- PWA Links -->
   <link rel="manifest" href="/static/manifest.json"/>
   <link rel="apple-touch-icon" href="/static/icon-192.png"/>
   <link rel="icon" type="image/png" sizes="192x192" href="/static/icon-192.png"/>
   <link rel="icon" type="image/png" sizes="512x512" href="/static/icon-512.png"/>
   
-  <!-- Fonts & Terminal -->
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"/>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css"/>
   <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
@@ -92,8 +89,40 @@
     #toolbar button:hover { background: #27c93f44; }
     #toolbar .sep { width: 1px; height: 20px; background: #30363d; }
 
-    #terminal-container { width: 100%; height: calc(100% - 36px); display: none; }
-    .xterm { padding: 4px; height: 100%; }
+    #terminal-container {
+      width: 100%; display: none; overflow: hidden;
+      height: calc(100vh - 36px);
+    }
+    @media (max-width: 768px) {
+      #terminal-container { height: var(--term-height, 50vh); }
+    }
+    .xterm { padding: 4px; height: 100%; touch-action: pan-y; }
+    .xterm-viewport { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
+
+    /* Modifier keys floating box */
+    #mod-box {
+      display: none; position: fixed; bottom: 8px; right: 8px; z-index: 9998;
+      background: #1c2128ee; border: 1px solid #30363d; border-radius: 10px;
+      padding: 6px; gap: 4px; flex-wrap: wrap; max-width: 140px;
+      justify-content: center; backdrop-filter: blur(8px);
+    }
+    #mod-box.active { display: flex; }
+    #mod-toggle {
+      position: fixed; bottom: 8px; right: 8px; z-index: 9997;
+      width: 28px; height: 28px; border-radius: 50%;
+      background: #1c212888; border: 1px solid #30363d55;
+      color: #768390; font-size: 10px; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      backdrop-filter: blur(4px);
+    }
+    #mod-toggle.on { background: #27c93f44; color: #27c93f; border-color: #27c93f55; }
+    .mod-btn {
+      background: #0d1117; border: 1px solid #30363d; border-radius: 5px;
+      color: #e6edf3; font-size: 10px; padding: 5px 8px; cursor: pointer;
+      font-family: 'JetBrains Mono', monospace; min-width: 32px; text-align: center;
+      user-select: none; -webkit-user-select: none;
+    }
+    .mod-btn:active, .mod-btn.on { background: #27c93f44; color: #27c93f; border-color: #27c93f; }
 
     #ctx-menu {
       display: none; position: fixed; background: #1c2128; border: 1px solid #30363d;
@@ -141,6 +170,27 @@
 
 <div id="terminal-container"></div>
 
+<!-- Modifier keys toggle button (tiny, corner) -->
+<button id="mod-toggle" title="Modifier keys">⌨</button>
+
+<!-- Modifier keys panel -->
+<div id="mod-box">
+  <button class="mod-btn" data-key="ctrl">Ctrl</button>
+  <button class="mod-btn" data-key="alt">Alt</button>
+  <button class="mod-btn" data-key="esc">Esc</button>
+  <button class="mod-btn" data-key="tab">Tab</button>
+  <button class="mod-btn" data-key="up">↑</button>
+  <button class="mod-btn" data-key="down">↓</button>
+  <button class="mod-btn" data-key="left">←</button>
+  <button class="mod-btn" data-key="right">→</button>
+  <button class="mod-btn" data-key="bs">⌫</button>
+  <button class="mod-btn" data-key="del">Del</button>
+  <button class="mod-btn" data-key="home">Home</button>
+  <button class="mod-btn" data-key="end">End</button>
+  <button class="mod-btn" data-key="pgup">PgUp</button>
+  <button class="mod-btn" data-key="pgdn">PgDn</button>
+</div>
+
 <div id="ctx-menu">
   <button id="ctx-copy">📋 Copy</button>
   <button id="ctx-paste">📄 Paste</button>
@@ -149,50 +199,21 @@
 </div>
 
 <script>
-  // PWA Install
+  // PWA
   let deferredPrompt;
   const installBanner = document.getElementById('install-banner');
+  window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); deferredPrompt = e; installBanner.classList.add('show'); });
+  document.getElementById('install-btn').onclick = async () => { if (deferredPrompt) { deferredPrompt.prompt(); deferredPrompt = null; installBanner.classList.remove('show'); } };
+  document.getElementById('install-close').onclick = () => installBanner.classList.remove('show');
+  window.addEventListener('appinstalled', () => { installBanner.classList.remove('show'); deferredPrompt = null; });
+  if ('serviceWorker' in navigator) navigator.serviceWorker.register('/static/sw.js');
 
-  window.addEventListener('beforeinstallprompt', (e) => {
-    e.preventDefault();
-    deferredPrompt = e;
-    installBanner.classList.add('show');
-  });
-
-  document.getElementById('install-btn').onclick = async () => {
-    if (deferredPrompt) {
-      deferredPrompt.prompt();
-      const { outcome } = await deferredPrompt.userChoice;
-      deferredPrompt = null;
-      installBanner.classList.remove('show');
-    }
-  };
-
-  document.getElementById('install-close').onclick = () => {
-    installBanner.classList.remove('show');
-  };
-
-  window.addEventListener('appinstalled', () => {
-    installBanner.classList.remove('show');
-    deferredPrompt = null;
-  });
-
-  // Register Service Worker
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('/static/sw.js');
-  }
-
-  // Session persistence
+  // Session
   const SESSION_KEY = "opencode_session_id";
-  let PASS_HASH = "";
-  let term = null;
-  let ws = null;
-  let reconnectAttempts = 0;
-  let isOnline = navigator.onLine;
-  let lastActivity = Date.now();
+  let PASS_HASH = "", term = null, ws = null, reconnectAttempts = 0, isOnline = navigator.onLine, lastActivity = Date.now();
+  let activeMods = new Set();
 
   fetch("/api/pass").then(r => r.json()).then(d => { PASS_HASH = d.pass; });
-
   document.getElementById("pass-btn").onclick = () => unlock();
   document.getElementById("pass-input").addEventListener("keydown", e => { if (e.key === "Enter") unlock(); });
 
@@ -219,66 +240,60 @@
     document.getElementById("offline-banner").classList.remove("visible");
     if (!ws || ws.readyState !== WebSocket.OPEN) reconnect();
   }
-
   function setOffline() {
     isOnline = false;
     document.getElementById("offline-banner").classList.add("visible");
     setStatus("reconnecting", "Offline...");
   }
-
   window.addEventListener("online", setOnline);
   window.addEventListener("offline", setOffline);
 
-  // Heartbeat
   setInterval(() => {
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      try { ws.send(JSON.stringify({type:"ping"})); } catch(e) {}
-    }
-    if (Date.now() - lastActivity > 30000 && (!ws || ws.readyState !== WebSocket.OPEN)) {
-      reconnect();
-    }
+    if (ws && ws.readyState === WebSocket.OPEN) try { ws.send(JSON.stringify({type:"ping"})); } catch(e) {}
+    if (Date.now() - lastActivity > 30000 && (!ws || ws.readyState !== WebSocket.OPEN)) reconnect();
   }, 10000);
 
+  // Mobile keyboard handling
+  function setTermHeight() {
+    const vh = window.innerHeight;
+    const barH = document.getElementById('status-bar').offsetHeight + document.getElementById('toolbar').offsetHeight;
+    document.getElementById('terminal-container').style.setProperty('--term-height', (vh - barH - 40) + 'px');
+    document.getElementById('terminal-container').style.height = (vh - barH) + 'px';
+    if (fitAddon) fitAddon.fit();
+  }
+
+  let fitAddon = null;
   function initTerminal() {
     term = new Terminal({
       cursorBlink: true,
       fontSize: 14,
       fontFamily: "'JetBrains Mono', monospace",
-      scrollback: 10000,
+      scrollback: 50000,
       allowProposedApi: true,
+      smoothScrollDuration: 50,
       theme: { background: '#0d1117', foreground: '#e6edf3', cursor: '#27c93f', selectionBackground: '#27c93f44' }
     });
 
-    const fitAddon = new FitAddon.FitAddon();
+    fitAddon = new FitAddon.FitAddon();
     term.loadAddon(fitAddon);
     term.open(document.getElementById("terminal-container"));
-    fitAddon.fit();
+    setTermHeight();
     term.focus();
 
     function getWsUrl() {
       const p = location.protocol === "https:" ? "wss" : "ws";
       return `${p}://${location.host}/ws`;
     }
-
     function getSavedSession() { return localStorage.getItem(SESSION_KEY); }
     function saveSession(sid) { localStorage.setItem(SESSION_KEY, sid); }
 
     function connect() {
       if (ws) { try { ws.close(); } catch(e) {} ws = null; }
-
       setStatus("reconnecting", reconnectAttempts > 0 ? `Reconnecting (${reconnectAttempts})...` : "Connecting...");
-
-      try {
-        ws = new WebSocket(getWsUrl());
-      } catch(e) {
-        setStatus("", "Failed");
-        scheduleReconnect();
-        return;
-      }
+      try { ws = new WebSocket(getWsUrl()); } catch(e) { setStatus("", "Failed"); scheduleReconnect(); return; }
 
       ws.onopen = () => {
-        lastActivity = Date.now();
-        reconnectAttempts = 0;
+        lastActivity = Date.now(); reconnectAttempts = 0;
         setStatus("connected", "Connected");
         const saved = getSavedSession();
         ws.send(JSON.stringify({ type: "attach", session_id: saved || undefined }));
@@ -296,17 +311,11 @@
           } else if (msg.type === "output") {
             term.write(msg.data);
           }
-        } catch(err) {
-          term.write(e.data);
-        }
+        } catch(err) { term.write(e.data); }
       };
 
-      ws.onerror = () => { setStatus("", "Error"); };
-
-      ws.onclose = () => {
-        setStatus("", "Disconnected");
-        scheduleReconnect();
-      };
+      ws.onerror = () => setStatus("", "Error");
+      ws.onclose = () => { setStatus("", "Disconnected"); scheduleReconnect(); };
     }
 
     function scheduleReconnect() {
@@ -314,51 +323,104 @@
       reconnectAttempts++;
       setTimeout(() => { if (isOnline) connect(); }, delay);
     }
-
-    window.reconnect = function() {
-      reconnectAttempts = 0;
-      connect();
-    };
+    window.reconnect = () => { reconnectAttempts = 0; connect(); };
 
     term.onData((data) => {
-      if (ws && ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: "input", data }));
-      }
+      if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "input", data }));
     });
 
     term.onResize(() => {
-      if (ws && ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
-      }
+      if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
     });
 
-    window.addEventListener("resize", () => { fitAddon.fit(); });
-
-    // Visibility change - reconnect when tab shown
+    window.addEventListener("resize", () => { setTermHeight(); });
     document.addEventListener("visibilitychange", () => {
       if (!document.hidden && (!ws || ws.readyState !== WebSocket.OPEN)) reconnect();
     });
 
+    // Touch scroll for mobile
+    const termEl = document.getElementById("terminal-container");
+    termEl.addEventListener('touchstart', (e) => {
+      if (e.touches.length === 1) e.stopPropagation();
+    }, { passive: true });
+
     connect();
   }
 
-  // Toolbar buttons
+  // Mobile keyboard: resize when viewport changes (keyboard open/close)
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', () => {
+      if (term) { setTermHeight(); term.focus(); }
+    });
+  }
+  window.addEventListener('resize', () => { if (term) setTermHeight(); });
+
+  // Modifier keys
+  const modToggle = document.getElementById('mod-toggle');
+  const modBox = document.getElementById('mod-box');
+
+  modToggle.onclick = () => {
+    modBox.classList.toggle('active');
+    modToggle.classList.toggle('on');
+  };
+
+  const keyMap = {
+    ctrl: '\x03',   // Ctrl+C as default, or hold for next key
+    alt: '\x1b',
+    esc: '\x1b',
+    tab: '\t',
+    up: '\x1b[A',
+    down: '\x1b[B',
+    left: '\x1b[D',
+    right: '\x1b[C',
+    bs: '\x7f',
+    del: '\x1b[3~',
+    home: '\x1b[H',
+    end: '\x1b[F',
+    pgup: '\x1b[5~',
+    pgdn: '\x1b[6~'
+  };
+
+  document.querySelectorAll('.mod-btn').forEach(btn => {
+    btn.addEventListener('touchstart', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const key = btn.dataset.key;
+      const code = keyMap[key];
+      if (code && ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: "input", data: code }));
+        btn.classList.add('on');
+        setTimeout(() => btn.classList.remove('on'), 200);
+        term.focus();
+      }
+    });
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const key = btn.dataset.key;
+      const code = keyMap[key];
+      if (code && ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: "input", data: code }));
+        btn.classList.add('on');
+        setTimeout(() => btn.classList.remove('on'), 200);
+        term.focus();
+      }
+    });
+  });
+
+  // Toolbar
   document.getElementById("btn-copy").onclick = () => {
-    const sel = term.getSelection();
+    const sel = term?.getSelection();
     if (sel) navigator.clipboard.writeText(sel);
   };
-
   document.getElementById("btn-paste").onclick = async () => {
     try {
       const text = await navigator.clipboard.readText();
-      if (text && ws && ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: "input", data: text }));
-      }
+      if (text && ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "input", data: text }));
     } catch(e) {}
   };
-
-  document.getElementById("btn-selectall").onclick = () => { term.selectAll(); };
-  document.getElementById("btn-clear").onclick = () => { term.clear(); };
+  document.getElementById("btn-selectall").onclick = () => term?.selectAll();
+  document.getElementById("btn-clear").onclick = () => term?.clear();
 
   // Context menu
   const ctxMenu = document.getElementById("ctx-menu");
@@ -368,45 +430,19 @@
     ctxMenu.style.left = `${e.pageX}px`;
     ctxMenu.style.top = `${e.pageY}px`;
   });
+  document.addEventListener("click", () => ctxMenu.style.display = "none");
 
-  document.addEventListener("click", () => { ctxMenu.style.display = "none"; });
-
-  document.getElementById("ctx-copy").onclick = () => {
-    const sel = term.getSelection();
-    if (sel) navigator.clipboard.writeText(sel);
-  };
-
-  document.getElementById("ctx-paste").onclick = async () => {
-    try {
-      const text = await navigator.clipboard.readText();
-      if (text && ws && ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: "input", data: text }));
-      }
-    } catch(e) {}
-  };
-
-  document.getElementById("ctx-selectall").onclick = () => { term.selectAll(); };
-  document.getElementById("ctx-clear").onclick = () => { term.clear(); };
+  document.getElementById("ctx-copy").onclick = () => { const s = term?.getSelection(); if (s) navigator.clipboard.writeText(s); };
+  document.getElementById("ctx-paste").onclick = async () => { try { const t = await navigator.clipboard.readText(); if (t && ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "input", data: t })); } catch(e) {} };
+  document.getElementById("ctx-selectall").onclick = () => term?.selectAll();
+  document.getElementById("ctx-clear").onclick = () => term?.clear();
 
   // Keyboard shortcuts
   document.addEventListener("keydown", (e) => {
     if (!term) return;
-    if (e.ctrlKey && e.key === "c") {
-      const sel = term.getSelection();
-      if (sel) { navigator.clipboard.writeText(sel); e.preventDefault(); }
-    }
-    if (e.ctrlKey && e.key === "v") {
-      e.preventDefault();
-      navigator.clipboard.readText().then(text => {
-        if (text && ws && ws.readyState === WebSocket.OPEN) {
-          ws.send(JSON.stringify({ type: "input", data: text }));
-        }
-      });
-    }
-    if (e.ctrlKey && e.key === "a") {
-      e.preventDefault();
-      term.selectAll();
-    }
+    if (e.ctrlKey && e.key === "c") { const s = term.getSelection(); if (s) { navigator.clipboard.writeText(s); e.preventDefault(); } }
+    if (e.ctrlKey && e.key === "v") { e.preventDefault(); navigator.clipboard.readText().then(t => { if (t && ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "input", data: t })); }); }
+    if (e.ctrlKey && e.key === "a") { e.preventDefault(); term.selectAll(); }
   });
 </script>
 </body>