Restore original UI + add persistence

static/index.html

@@ -5,17 +5,20 @@
   <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="Persistent web terminal"/>
+  <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>
@@ -42,6 +45,19 @@
     }
     #pass-screen .err { color: #ff5f56; font-size: 12px; }
 
+    #install-banner {
+      display: none; position: fixed; bottom: 0; left: 0; width: 100%;
+      background: #161b22; border-top: 1px solid #30363d; padding: 12px 16px;
+      z-index: 10000; flex-direction: row; align-items: center; justify-content: space-between;
+    }
+    #install-banner.show { display: flex; }
+    #install-banner span { color: #e6edf3; font-size: 13px; }
+    #install-banner button {
+      background: #27c93f; color: #000; border: none; padding: 8px 20px;
+      font-size: 12px; border-radius: 6px; cursor: pointer; font-weight: bold;
+    }
+    #install-banner .close { background: none; color: #768390; padding: 8px; }
+
     #status-bar {
       display: none; background: #161b22; padding: 6px 12px; border-bottom: 1px solid #30363d;
       gap: 10px; align-items: center; font-size: 11px;
@@ -55,8 +71,7 @@
     #status-dot.reconnecting { background: #ffbd2e; animation: pulse 1s infinite; }
     @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
     #status-text { color: #768390; }
-    #session-id { color: #58a6ff; margin-left: auto; }
-    #pkg-count { color: #27c93f; }
+    #session-info { color: #58a6ff; margin-left: auto; }
 
     #offline-banner {
       display: none; background: #ff5f56; color: #fff; text-align: center;
@@ -64,7 +79,20 @@
     }
     #offline-banner.visible { display: block; }
 
-    #terminal-container { width: 100%; height: calc(100% - 32px); display: none; }
+    #toolbar {
+      display: none; background: #161b22; padding: 6px 12px; border-bottom: 1px solid #30363d;
+      gap: 8px; align-items: center;
+    }
+    #toolbar.active { display: flex; }
+    #toolbar button {
+      background: #27c93f22; border: 1px solid #27c93f55; border-radius: 6px;
+      color: #27c93f; font-size: 11px; padding: 5px 12px; cursor: pointer;
+      font-family: 'JetBrains Mono', monospace;
+    }
+    #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%; }
 
     #ctx-menu {
@@ -87,13 +115,28 @@
   <div class="err" id="pass-err"></div>
 </div>
 
-<div id="offline-banner">&#x26A0; OFFLINE &mdash; Reconnecting automatically...</div>
+<div id="install-banner">
+  <span>Install OpenCode Terminal</span>
+  <div>
+    <button id="install-btn">Install</button>
+    <button class="close" id="install-close">✕</button>
+  </div>
+</div>
+
+<div id="offline-banner">&#x26A0; OFFLINE — Reconnecting automatically...</div>
 
 <div id="status-bar">
   <div id="status-dot"></div>
   <span id="status-text">Connecting...</span>
-  <span id="pkg-count"></span>
-  <span id="session-id"></span>
+  <span id="session-info"></span>
+</div>
+
+<div id="toolbar">
+  <button id="btn-copy">📋 Copy</button>
+  <button id="btn-paste">📄 Paste</button>
+  <button id="btn-selectall">📝 Select All</button>
+  <div class="sep"></div>
+  <button id="btn-clear">🗑 Clear</button>
 </div>
 
 <div id="terminal-container"></div>
@@ -106,6 +149,40 @@
 </div>
 
 <script>
+  // PWA Install
+  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();
+      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
   const SESSION_KEY = "opencode_session_id";
   let PASS_HASH = "";
   let term = null;
@@ -124,6 +201,7 @@
     if (val === PASS_HASH && PASS_HASH !== "") {
       document.getElementById("pass-screen").classList.add("hidden");
       document.getElementById("status-bar").classList.add("active");
+      document.getElementById("toolbar").classList.add("active");
       document.getElementById("terminal-container").style.display = "block";
       initTerminal();
     } else {
@@ -204,6 +282,8 @@
         setStatus("connected", "Connected");
         const saved = getSavedSession();
         ws.send(JSON.stringify({ type: "attach", session_id: saved || undefined }));
+        ws.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
+        term.focus();
       };
 
       ws.onmessage = (e) => {
@@ -212,7 +292,7 @@
           const msg = JSON.parse(e.data);
           if (msg.type === "session_info") {
             saveSession(msg.session_id);
-            document.getElementById("session-id").textContent = `Session: ${msg.session_id}`;
+            document.getElementById("session-info").textContent = `Session: ${msg.session_id}`;
           } else if (msg.type === "output") {
             term.write(msg.data);
           }
@@ -260,13 +340,26 @@
     });
 
     connect();
-
-    // Fetch package count
-    fetch("/api/sessions").then(r => r.json()).then(d => {
-      document.getElementById("pkg-count").textContent = `${d.length} sessions`;
-    }).catch(() => {});
   }
 
+  // Toolbar buttons
+  document.getElementById("btn-copy").onclick = () => {
+    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 }));
+      }
+    } catch(e) {}
+  };
+
+  document.getElementById("btn-selectall").onclick = () => { term.selectAll(); };
+  document.getElementById("btn-clear").onclick = () => { term.clear(); };
+
   // Context menu
   const ctxMenu = document.getElementById("ctx-menu");
   document.getElementById("terminal-container").addEventListener("contextmenu", (e) => {
@@ -275,20 +368,25 @@
     ctxMenu.style.left = `${e.pageX}px`;
     ctxMenu.style.top = `${e.pageY}px`;
   });
+
   document.addEventListener("click", () => { ctxMenu.style.display = "none"; });
 
   document.getElementById("ctx-copy").onclick = () => {
-    const sel = term?.getSelection();
+    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?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "input", data: text }));
+      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-selectall").onclick = () => { term.selectAll(); };
+  document.getElementById("ctx-clear").onclick = () => { term.clear(); };
 
   // Keyboard shortcuts
   document.addEventListener("keydown", (e) => {
@@ -300,9 +398,15 @@
     if (e.ctrlKey && e.key === "v") {
       e.preventDefault();
       navigator.clipboard.readText().then(text => {
-        if (text && ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "input", data: 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();
+    }
   });
 </script>
 </body>