Spaces:

Bjo53
/

opencode-ai

Sleeping

App Files Files Community

Bjo53 commited on Jun 3

Commit

74186dd

verified ·

1 Parent(s): 9ff8ef2

Upload static/index.html with huggingface_hub

Browse files

Files changed (1) hide show

static/index.html +119 -7

static/index.html CHANGED Viewed

@@ -29,8 +29,31 @@
     }
     #pass-screen .err { color: #ff5f56; font-size: 12px; }
-    #terminal-container { width: 100%; height: 100%; }
     .xterm { padding: 4px; height: 100%; }
   </style>
 </head>
 <body>
@@ -41,10 +64,27 @@
   <div class="err" id="pass-err"></div>
 </div>
-<div id="terminal-container" style="display:none;"></div>
 <script>
   const PASS_HASH = "opencode";
   document.getElementById("pass-btn").onclick = () => unlock();
   document.getElementById("pass-input").addEventListener("keydown", e => { if (e.key === "Enter") unlock(); });
@@ -53,6 +93,7 @@
     const val = document.getElementById("pass-input").value;
     if (val === PASS_HASH) {
       document.getElementById("pass-screen").classList.add("hidden");
       document.getElementById("terminal-container").style.display = "block";
       initTerminal();
     } else {
@@ -60,15 +101,14 @@
     }
   }
-  let ws = null;
   function initTerminal() {
-    const term = new Terminal({
       cursorBlink: true,
       fontSize: 14,
       fontFamily: "'JetBrains Mono', monospace",
-      scrollback: 5000,
-      theme: { background: '#0d1117', foreground: '#e6edf3', cursor: '#27c93f' }
     });
     const fitAddon = new FitAddon.FitAddon();
@@ -105,6 +145,78 @@
     window.addEventListener("resize", () => { fitAddon.fit(); });
     connect();
   }
 </script>
 </body>
 </html>

     }
     #pass-screen .err { color: #ff5f56; font-size: 12px; }
+    #toolbar {
+      display: none; background: #161b22; padding: 6px 12px; border-bottom: 1px solid #30363d;
+      gap: 8px; align-items: center;
+    }
+    #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 {
+      display: none; position: fixed; background: #1c2128; border: 1px solid #30363d;
+      border-radius: 8px; padding: 4px; z-index: 9999; min-width: 160px;
+    }
+    #ctx-menu button {
+      display: block; width: 100%; background: none; border: none; color: #e6edf3;
+      padding: 8px 12px; text-align: left; cursor: pointer; border-radius: 4px;
+      font-family: 'JetBrains Mono', monospace; font-size: 12px;
+    }
+    #ctx-menu button:hover { background: #27c93f22; color: #27c93f; }
   </style>
 </head>
 <body>
   <div class="err" id="pass-err"></div>
 </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>
+<div id="ctx-menu">
+  <button id="ctx-copy">📋 Copy</button>
+  <button id="ctx-paste">📄 Paste</button>
+  <button id="ctx-selectall">📝 Select All</button>
+  <button id="ctx-clear">🗑 Clear</button>
+</div>
 <script>
   const PASS_HASH = "opencode";
+  let term = null;
+  let ws = null;
   document.getElementById("pass-btn").onclick = () => unlock();
   document.getElementById("pass-input").addEventListener("keydown", e => { if (e.key === "Enter") unlock(); });
     const val = document.getElementById("pass-input").value;
     if (val === PASS_HASH) {
       document.getElementById("pass-screen").classList.add("hidden");
+      document.getElementById("toolbar").style.display = "flex";
       document.getElementById("terminal-container").style.display = "block";
       initTerminal();
     } else {
     }
   }
   function initTerminal() {
+    term = new Terminal({
       cursorBlink: true,
       fontSize: 14,
       fontFamily: "'JetBrains Mono', monospace",
+      scrollback: 10000,
+      allowProposedApi: true,
+      theme: { background: '#0d1117', foreground: '#e6edf3', cursor: '#27c93f', selectionBackground: '#27c93f44' }
     });
     const fitAddon = new FitAddon.FitAddon();
     window.addEventListener("resize", () => { fitAddon.fit(); });
     connect();
   }
+  // 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) => {
+    e.preventDefault();
+    ctxMenu.style.display = "block";
+    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();
+    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(); };
+  // 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();
+    }
+  });
 </script>
 </body>
 </html>