pinokiod 3.8.0 → 3.8.5

package/server/views/terminal.ejs

@@ -33,6 +33,16 @@
 <link href="/css/brands.min.css" rel="stylesheet">
 <link href="/style.css" rel="stylesheet"/>
 <link href="/noty.css" rel="stylesheet"/>
+<!--
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+-->
+
+
 <% if (agent === "electron") { %>
   <link href="/electron.css" rel="stylesheet"/>
 <% } %>
@@ -92,12 +102,16 @@ header {
 .xterm .xterm-viewport {
   width: initial !important;
 }
+/*
 .navheader {
   background: var(--dark-bg);
 }
+*/
+/*
 .btn {
   background: royalblue;
 }
+*/
 #del-bin {
   color: royalblue;
   cursor: pointer;
@@ -111,6 +125,7 @@ body.frozen {
 </style>
 <link href="/terminal.css" rel="stylesheet"/>
 <script>
+let shell_id
 document.addEventListener("DOMContentLoaded", async () => {
   <% if (error) { %>
     document.querySelector(".requirements .content").innerHTML = '<div class="loading"><i class="fa-solid fa-circle-exclamation"></i> <%=error%></div>'
@@ -137,9 +152,22 @@ document.addEventListener("DOMContentLoaded", async () => {
   class RPC {
     constructor() {
       this.socket = new Socket()
+      this.buffer = []
     }
     write(text) {
-      this.term.write(text)
+//      console.log(text)
+//      this.buffer += text;
+//      if (!this.timeout) {
+//        this.timeout = setTimeout(() => {
+//          console.log("write", this.buffer)
+//          this.term.write(this.buffer);
+//          this.buffer = "";
+//          this.timeout = null;
+//        }, 50);
+//      }
+      if (text !== "\u0007") {
+        this.term.write(text)
+      }
       this.dirty = true
     }
     finished() {
@@ -191,6 +219,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         await this.socket.close()
 
         let query = Object.fromEntries(new URLSearchParams(location.search))
+        console.log(">>>>>>>> 1")
 
         this.socket.run({
           //uri: location.pathname.slice(1).replace("api/", ""),
@@ -203,9 +232,13 @@ document.addEventListener("DOMContentLoaded", async () => {
             rows: this.term.rows,
           }
         }, async (packet) => {
+          console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ", { packet })
           if (packet.type === 'start') {
             refreshParent(packet)
             reloadMemory()
+            document.querySelector(".run .play").classList.add("hidden")
+            document.querySelector(".run .starting").classList.add("hidden")
+            document.querySelector(".run .stop").classList.remove("hidden")
             if (packet.data && packet.data.description) {
               if ('current' in packet.data) {
                 document.querySelector("footer").innerHTML = `<b>
@@ -234,7 +267,13 @@ document.addEventListener("DOMContentLoaded", async () => {
 //              </div>`
             }
           } else if (packet.type === "stream") {
+            console.log(">>>>>>>> 3")
+            // set the current shell id
+            if (packet.data.id) {
+              shell_id = packet.data.id
+            }
             if (packet.data.raw) {
+//              console.log({ packet })
               this.write(packet.data.raw)
             } else if (packet.data.json) {
               this.write(JSON.stringify(packet.data.json).replace(/\n/g, "\r\n"))
@@ -255,8 +294,14 @@ document.addEventListener("DOMContentLoaded", async () => {
             document.querySelector(".run .play").classList.remove("hidden")
             document.querySelector(".run .stop").classList.add("hidden")
           } else if (packet.type === 'connect') {
-            const message = "..........Connected!\r\n"
-            this.write(message)
+            if (packet.data) {
+              if (packet.data.shell) {
+                shell_id = packet.data.shell
+              }
+              if (packet.data.state) {
+                this.write(packet.data.state)
+              }
+            }
             /*
             for(let i=0; i<message.length; i++) {
               await new Promise((r, reject) => {
@@ -267,6 +312,7 @@ document.addEventListener("DOMContentLoaded", async () => {
               })
             }
             */
+            console.log(">>>>>>>> 2")
             document.querySelector(".run .play").classList.add("hidden")
             document.querySelector(".run .starting").classList.add("hidden")
             document.querySelector(".run .stop").classList.remove("hidden")
@@ -465,7 +511,6 @@ document.addEventListener("DOMContentLoaded", async () => {
               document.querySelector("#error-screen").classList.add("hidden")
             })
             */
-            console.log("instance", instance)
             instance.mark(packet.event)
             let element = document.querySelector("mark")
             element.scrollIntoView({ behavior: "smooth", block: "center" });
@@ -558,11 +603,29 @@ document.addEventListener("DOMContentLoaded", async () => {
       await this.start(mode)
     }
     async createTerm () {
+      console.log(xtermTheme)
       if (!this.term) {
+        const theme = Object.assign({ }, xtermTheme.Terminal_Basic, {
+          selectionBackground: "red",
+          selectionForeground: "white"
+        })
+
         let config = {
           scrollback: 9999999,
-          fontSize: 12,
-          theme: xtermTheme.FrontEndDelight
+          //fontSize: 12,
+          fontSize: 14,
+          theme,
+          //theme: xtermTheme.FrontEndDelight
+          //theme: xtermTheme.Afterglow
+
+          //theme: xtermTheme.PencilLight
+
+          //theme: xtermTheme.Flatland
+          //theme: xtermTheme.OneHalfLight
+          //theme: xtermTheme.Piatto_Light
+          //theme: xtermTheme.Spring
+          //theme: xtermTheme.Terminal_Basic
+          //theme: xtermTheme.Tomorrow
         }
         let res = await fetch("/xterm_config").then((res) => {
           return res.json()
@@ -572,13 +635,20 @@ document.addEventListener("DOMContentLoaded", async () => {
         }
         const term = new Terminal(config)
         term.open(document.querySelector("#terminal"))
-
         term.attachCustomKeyEventHandler(event => {
-          if (event.ctrlKey && event.key === 'c' && term.hasSelection()) {
-            return false;
+          console.log({ event })
+          if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
+            const selection = term.getSelection();
+            if (selection) {
+              navigator.clipboard.writeText(selection);
+              return false;
+            }
           }
-          if (event.ctrlKey && event.key === 'v' && this._options.pasteWithCtrlV) {
-            return false;
+          if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
+            navigator.clipboard.readText().then((text) => {
+              term.write(text);
+            })
+            return false
           }
           return true;
         });
@@ -589,6 +659,17 @@ document.addEventListener("DOMContentLoaded", async () => {
         ////term.resize(cols, rows-5);
         //term.resize(cols, rows);
 
+        term.onKey(({ key }) => {
+          if (this.socket) {
+            if (shell_id) {
+              this.socket.run({
+                key,
+                id: shell_id
+              })
+            }
+          }
+        });
+
         const fitAddon = new FitAddon.FitAddon();
 //        const searchAddon = new SearchAddon.SearchAddon();
 //        const searchAddonBar = new SearchBarAddon.SearchBarAddon({searchAddon});
@@ -606,6 +687,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         fitAddon.fit();
         this.term = term
         this.fit = fitAddon
+
       }
       this.term.focus()
     }
@@ -771,7 +853,7 @@ const reloadMemory = async () => {
 <% } else { %>
 <body class='<%=theme%>'>
 <% } %>
-  <header class='navheader'>
+  <header class='navheader2'>
   <% if (!install_required) { %>
     <div class='runner'>
       <% if (locals.prev) { %>
@@ -782,14 +864,16 @@ const reloadMemory = async () => {
         <span class='starting hidden'><i class="fa-solid fa-circle-notch fa-spin"></i> Starting...</span>
         <span class='stop hidden'><i class="fa-solid fa-stop"></i> Stop</span>
       </div>
-      <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> View File</button>
+      <% if (locals.filepath) { %>
+        <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> View File</button>
+      <% } %>
       <!--
       <button class='btn' id='open-log' data-logpath="<%=logpath%>"><i class="fa-solid fa-align-left"></i> View Logs</button>
       -->
     </div>
   <% } %>
   </header>
-  <% if (requirements_pending) { %>
+  <% if (locals.requirements_pending) { %>
     <div class='requirements'>
       <div class='content'>
         <div class='loading'>
@@ -798,7 +882,7 @@ const reloadMemory = async () => {
       </div>
     </div>
   <% } else { %>
-    <% if (install_required) { %>
+    <% if (locals.install_required) { %>
       <div class='requirements'>
         <div class='content'>
           <div class='title'><i class="fa-solid fa-circle-exclamation"></i> Installation required</div>