pinokiod 3.85.0 → 3.86.0

package/server/views/network.ejs

@@ -35,7 +35,7 @@ ol {
   padding-inline-start: 15px;
 }
 a.explain {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: underline; 
   cursor: pointer;
 }
@@ -126,12 +126,12 @@ header .runner {
   margin-top: 5px;
 }
 a.badge {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: none;
   cursor: pointer;
 }
 .badge a {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: none;
 }
 /*
@@ -147,7 +147,7 @@ body.dark .browser-options-row {
   border-bottom: 1px solid rgba(255,255,255,0.05);
 }
 .description a {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: none;
 }
 a.ln[href^=https] {
@@ -215,11 +215,11 @@ a.ln:hover {
   box-sizing: border-box;
 }
 .container-row.current .header-label-sub {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 /*
 .container-row.current .header-label-sub {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 */
 .desc {
@@ -241,7 +241,7 @@ a.ln:hover {
   padding-top: 5px;
   padding-bottom: 0 !important;
   text-decoration: none;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   cursor: pointer;
 }
 .container-row table {
@@ -250,7 +250,7 @@ a.ln:hover {
 }
 table a {
   text-decoration: none;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 td:first-child, th:first-child {
   max-width: 100px;
@@ -295,7 +295,7 @@ body.dark .config {
   align-items: stretch;
 }
 body.dark .config .btn {
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
 }
 .config .btn {
   font-size: 16px;
@@ -303,7 +303,7 @@ body.dark .config .btn {
   width: 100px;
   /*
   */
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   flex-shrink: 0;
 }
 .config-row {
@@ -380,7 +380,7 @@ input:checked + .slider {
   background-color: #2196F3;
   background: black;
   */
-  background-color: royalblue;
+  background-color: rgba(127, 91, 243, 0.9);
 }
 
 input:focus + .slider {
@@ -468,7 +468,7 @@ body.dark aside .tab {
   color: white;
 }
 body.dark aside .tab:hover, aside .tab:hover {
-  color: royalblue !important;
+  color: rgba(127, 91, 243, 0.9) !important;
   opacity: 1;
 }
 aside .tab {
@@ -515,8 +515,8 @@ aside .current.selected {
   border-left: 10px solid transparent;
 }
 body.dark .net:hover, .net:hover {
-  color: royalblue;
-  border-left: 4px solid royalblue;
+  color: rgba(127, 91, 243, 0.9);
+  border-left: 4px solid rgba(127, 91, 243, 0.9);
 }
 body.dark .net {
   border-left: 3px solid white;
@@ -630,12 +630,12 @@ header .runner {
   margin-top: 5px;
 }
 a.badge {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: none;
   cursor: pointer;
 }
 .badge a {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: none;
 }
 body.dark .btn {
@@ -766,7 +766,7 @@ body.dark .open-menu, body.dark .browse {
   color: white !important;
 }
 .open-menu:hover, .browse:hover, body.dark .open-menu:hover, body.dark .browse:hover {
-  color: royalblue !important;
+  color: rgba(127, 91, 243, 0.9) !important;
 }
 .open-menu, .browse {
   width: 80px;
@@ -866,7 +866,7 @@ body.dark aside .tab {
   color: white;
 }
 body.dark aside .tab:hover, aside .tab:hover {
-  color: royalblue !important;
+  color: rgba(127, 91, 243, 0.9) !important;
   opacity: 1;
 }
 aside .tab {
@@ -906,8 +906,8 @@ aside .selected {
   padding: 0;
 }
 body.dark .net:hover, .net:hover {
-  color: royalblue;
-  border-left: 4px solid royalblue;
+  color: rgba(127, 91, 243, 0.9);
+  border-left: 4px solid rgba(127, 91, 243, 0.9);
 }
 body.dark .net {
   border-left: 3px solid white;
@@ -1187,7 +1187,7 @@ document.addEventListener('DOMContentLoaded', function() {
   </div>
   <aside>
     <div class='btn-tab'>
-      <a href="/init" class='btn'><i class="fa-solid fa-plus"></i><div class='caption'>Create</div></a>
+      <button type='button' class='btn' id='create-launcher-button'><i class="fa-solid fa-plus"></i><div class='caption'>Create</div></button>
       <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-globe"></i><div class='caption'>Discover</div></a>
     </div>
     <a href="/" class='tab'><i class='fas fa-laptop-code'></i><div class='caption'>This machine</div></a>

package/server/views/network2.ejs

@@ -31,7 +31,7 @@ ol {
   padding-inline-start: 15px;
 }
 a.explain {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: underline; 
   cursor: pointer;
 }
@@ -122,12 +122,12 @@ header .runner {
   margin-top: 5px;
 }
 a.badge {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: none;
   cursor: pointer;
 }
 .badge a {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: none;
 }
 body.dark .btn {
@@ -142,7 +142,7 @@ body.dark .browser-options-row {
   border-bottom: 1px solid rgba(255,255,255,0.05);
 }
 .description a {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: none;
 }
 a.ln[href^=https] {
@@ -210,11 +210,11 @@ a.ln:hover {
   box-sizing: border-box;
 }
 .container-row.current .header-label-sub {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 /*
 .container-row.current .header-label-sub {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 */
 .desc {
@@ -229,7 +229,7 @@ a.ln:hover {
 .link-label {
   margin-right: 10px;
   text-decoration: underline;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   cursor: pointer;
 }
 .container-row table {
@@ -238,7 +238,7 @@ a.ln:hover {
 }
 table a {
   text-decoration: none;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 td:first-child, th:first-child {
   max-width: 100px;
@@ -289,7 +289,7 @@ body.dark .config {
   font-size: 16px;
   font-weight: bold;
   width: 100px;
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   flex-shrink: 0;
 }
 .config-row {
@@ -351,7 +351,7 @@ input:checked + .slider {
 /*
   background-color: #2196F3;
   */
-  background-color: royalblue;
+  background-color: rgba(127, 91, 243, 0.9);
 }
 
 input:focus + .slider {

package/server/views/old_network.ejs

@@ -114,12 +114,12 @@ header .runner {
   margin-top: 5px;
 }
 a.badge {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: none;
   cursor: pointer;
 }
 .badge a {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: none;
 }
 body.dark .btn {
@@ -134,7 +134,7 @@ body.dark .browser-options-row {
   border-bottom: 1px solid rgba(255,255,255,0.05);
 }
 .description a {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: none;
 }
 a.ln[href^=https] {
@@ -202,7 +202,7 @@ a.ln:hover {
   box-sizing: border-box;
 }
 .container-row.current .header-label-sub {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 /*
 .container-row.current .header-label-sub {
@@ -221,7 +221,7 @@ a.ln:hover {
 .link-label {
   margin-right: 10px;
   text-decoration: underline;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   cursor: pointer;
 }
 .container-row table {
@@ -230,7 +230,7 @@ a.ln:hover {
 }
 table a {
   text-decoration: none;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 td:first-child, th:first-child {
   max-width: 100px;
@@ -281,7 +281,7 @@ body.dark .config {
   font-size: 16px;
   font-weight: bold;
   width: 100px;
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   flex-shrink: 0;
 }
 .config-row {
@@ -338,7 +338,7 @@ input:checked + .slider {
 /*
   background-color: #2196F3;
   */
-  background-color: royalblue;
+  background-color: rgba(127, 91, 243, 0.9);
 }
 
 input:focus + .slider {

package/server/views/pro.ejs

@@ -0,0 +1,369 @@
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<script src="/hotkeys.min.js"></script>
+<script src="/ace/ace.js"></script>
+<script src="/noty.js"></script>
+<script src="/notyq.js"></script>
+<script src="/xterm.js"></script>
+<script src="/xterm-addon-fit.js"></script>
+<script src="/xterm-addon-web-links.js"></script>
+<script src="/xterm-theme.js"></script>
+<script src="/xterm-addon-search.js"></script>
+<script src="/xterm-addon-search-bar.js"></script>
+<script src="/sweetalert2.js"></script>
+<script src="/Socket.js"></script>
+<script src="/common.js"></script>
+<script src="/he.js"></script>
+<script src="/opener.js"></script>
+<!--
+<script src="/nav.js"></script>
+-->
+<script src="/autoexpand.js"></script>
+<script src="/modalinput.js"></script>
+<script src="/simplemodal.js"></script>
+<script src="/waitmodal.js"></script>
+<script src="/notifyinput.js"></script>
+<script src="/report.js"></script>
+<script src="/mark.min.js"></script>
+<link href="/xterm.min.css" rel="stylesheet" />
+<link href="/css/fontawesome.min.css" rel="stylesheet">
+<link href="/css/solid.min.css" rel="stylesheet">
+<link href="/css/regular.min.css" rel="stylesheet">
+<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"/>
+<% } %>
+<style>
+.stopped-btn {
+  background: silver;
+}
+html {
+  scroll-behavior: smooth;
+  height: 100%;
+  overflow: hidden;
+}
+body {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+#table > table {
+  border-left: 2px solid black;
+  padding-left: 5px;
+  margin: 10px 0;
+}
+.highlight {
+  background: yellow;
+  width: 100px;
+}
+th {
+  background: rgba(0,0,0,0.1);
+  padding: 10px;
+  font-size: 12px;
+}
+td {
+  font-size: 12px;
+  padding: 10px;
+}
+td.val {
+  background: rgba(0,0,0,0.06);
+}
+td.key {
+  background: rgba(0,0,0,0.1);
+}
+.button {
+  cursor: pointer; 
+  background: rgba(0,0,0,0.8);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+}
+header {
+  position: relative;
+  padding: 10px 0;
+}
+.button:hover {
+  
+}
+.terminal {
+  box-sizing: border-box;
+}
+.xterm .xterm-viewport {
+  width: initial !important;
+}
+.navheader3 {
+  padding: 10px;
+}
+.navheader {
+  padding-bottom: 0;
+}
+.navheader h1 {
+  align-items: center;
+}
+/*
+.navheader {
+  background: var(--dark-bg);
+}
+*/
+/*
+.btn {
+  background: rgba(127, 91, 243, 0.9);
+}
+*/
+#del-bin {
+  color: rgba(127, 91, 243, 0.9);
+  cursor: pointer;
+  font-weight: bold;
+  padding: 0 5px;
+  text-decoration: underline;
+}
+body.frozen {
+  overflow: auto !important;
+}
+.terminal-container {
+  padding: 0;
+}
+#status-window {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  /*
+  flex-grow: 1;
+  text-align: right;
+  */
+  padding: 0 10px;
+}
+#status-window strong {
+  color: rgba(127, 91, 243, 0.9);
+}
+#status-window b {
+  color: black;
+  font-weight: normal;
+}
+body.dark #status-window b {
+  color: white;
+}
+#progress-window {
+  flex-shrink: 0;
+  width: 100px;
+  background: #eee;
+  height: 15px;
+  /*
+  border-radius: 5px;
+  */
+  overflow: hidden;
+}
+#progress-bar {
+  width: 0%;
+  height: 100%;
+  background: rgba(127, 91, 243, 0.9);
+  transition: width 0.2s;
+}
+</style>
+<link href="/terminal.css" rel="stylesheet"/>
+</head>
+<body class='<%=theme%>' data-agent="<%=agent%>">
+  <% if (target === "_top") { %>
+    <header class='navheader grabbable'>
+  <% } else { %>
+    <header class='navheader3'>
+  <% } %>
+    <h1>
+      <% if (target === "_top") { %>
+      <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+      <% } %>
+      <div class='hidden btn run play-btn'>
+        <span class='play'><i class="fa-solid fa-play"></i> Start</span>
+      </div>
+      <div class='hidden btn run starting-btn'>
+        <span class='starting'><i class="fa-solid fa-circle-notch fa-spin"></i> Starting...</span>
+      </div>
+      <div class='hidden btn run stop-btn'>
+        <span class='stop'><i class="fa-solid fa-stop"></i> Stop</span>
+      </div>
+      <div class='hidden btn stopped-btn'>
+        <span class='stopped'><i class="fa-solid fa-hand"></i> Stopped</span>
+      </div>
+      <div id='status-window'></div>
+      <div id='progress-window' class='hidden'><div id='progress-bar'></div></div>
+    </h1>
+  </header>
+  <div class='terminal-container'>
+    <div id='terminal'></div>
+  </div>
+  <footer><b>Ready</b></footer>
+<script>
+let shell_id
+let socket = new Socket()
+const createTerm = async (_theme) => {
+  const theme = Object.assign({ }, _theme, {
+    selectionBackground: "red",
+    selectionForeground: "white"
+  })
+  <% if (theme !== "dark") { %>
+    theme.foreground = "black"
+  <% } %>
+  let config = {
+    scrollback: 9999999,
+    fontSize: 14,
+    theme,
+  }
+  let res = await fetch("/xterm_config").then((res) => {
+    return res.json()
+  })
+  if (res && res.config) {
+    config = res.config
+  }
+  const term = new Terminal(config)
+  term.open(document.querySelector("#terminal"))
+
+  term.attachCustomKeyEventHandler(event => {
+    if (event.ctrlKey && event.key === 'c' && term.hasSelection()) {
+      return false;
+    }
+    if (event.ctrlKey && event.key === 'v' && this._options.pasteWithCtrlV) {
+      return false;
+    }
+    return true;
+  });
+
+  fitAddon = new FitAddon.FitAddon();
+  term.loadAddon(fitAddon);
+  <% if (agent === "electron") { %>
+    term.loadAddon(new WebLinksAddon.WebLinksAddon((event, uri) => {
+      window.open(uri, "_blank")
+    }))
+  <% } else { %>
+    term.loadAddon(new WebLinksAddon.WebLinksAddon());
+  <% } %>
+  fitAddon.fit();
+
+  term.onKey(({ key }) => {
+    console.log({ key, shell_id })
+    if (socket) {
+      if (shell_id) {
+        socket.run({
+          key,
+          id: shell_id
+        })
+      }
+    }
+  });
+
+  let observer = new ResizeObserver(() => {
+    fitAddon.fit()
+    console.log(`Resized to ${term.cols}x${term.rows}`);
+    // Trigger your custom handler here
+    if (socket) {
+      if (shell_id) {
+        console.log("RESIZE", { shell_id, cols: term.cols, rows: term.rows })
+        socket.run({
+          resize: {
+            cols: term.cols,
+            rows: term.rows,
+          },
+          id: shell_id
+        })
+      }
+    }
+  });
+  observer.observe(document.body)
+
+  term.focus()
+  console.log(`Resized to ${term.cols}x${term.rows}`);
+  return term
+}
+
+async function displayResults(config) {
+  <% if (theme === "dark") { %>
+  let term = await createTerm(xtermTheme.FrontEndDelight)
+  <% } else { %>
+  let term = await createTerm(xtermTheme.Tomorrow)
+  <% } %>
+  const write = (text) => {
+    if (text !== "\u0007") {
+      term.write(text)
+    }
+  }
+  socket.run({
+    id: "kernel.proto.create",
+    method: "kernel.proto.create",
+    cwd: config.cwd,
+    client: {
+      cols: term.cols,
+      rows: term.rows,
+    },
+    params: config
+  }, async (packet) => {
+    console.log('packet', packet)
+    if (packet.type === 'start') {
+      document.querySelector(".play-btn").classList.add("hidden")
+      document.querySelector(".starting-btn").classList.add("hidden")
+      document.querySelector(".stop-btn").classList.remove("hidden")
+    } else if (packet.type === "result") {
+      if (packet.data.success) {
+        location.href = packet.data.success
+      } else if (packet.data.error) {
+        alert(packet.data.error)
+        location.href = location.href
+      }
+    } else if (packet.type === "stream") {
+      // set the current shell id
+      if (packet.data.id) {
+        shell_id = packet.data.id
+      }
+      if (packet.data.raw) {
+        write(packet.data.raw)
+      } else if (packet.data.json) {
+        write(JSON.stringify(packet.data.json).replace(/\n/g, "\r\n"))
+        write("\r\n")
+      } else if (packet.data.json2) {
+        write(JSON.stringify(packet.data.json2, null, 2).replace(/\n/g, "\r\n"))
+        write("\r\n")
+      }
+      document.querySelector("#end").scrollIntoView({ behavior: 'smooth' });
+    } else if (packet.type === 'disconnect') {
+      term.write("\r\nDisconnected...\r\n")
+      socket.close()
+    } else if (packet.type === 'connect') {
+      if (packet.data) {
+        if (packet.data.shell) {
+          shell_id = packet.data.shell
+        }
+      }
+    }
+  }).then((res) => {
+    console.log("Ended", res)
+  })
+}
+const url = new URL(window.location.href);
+const searchParams = url.searchParams;
+let cwd = searchParams.get("cwd")
+let name = searchParams.get("name")
+let tool = searchParams.get("tool")
+let aiPrompt = searchParams.get("message")
+displayResults({
+  cwd: "<%-JSON.stringify(cwd).slice(1, -1)%>",
+  name: name,
+  startType: "new",
+  projectType: "ai",
+  aiPrompt,
+  tool
+})
+</script>
+</body>
+</html>

package/server/views/prototype/index.ejs

@@ -633,8 +633,8 @@ body.dark .frame-link.selected {
   */
 }
 .loader .btn:hover {
-  color: royalblue;
-  border-color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
+  border-color: rgba(127, 91, 243, 0.9);
 }
 .loader .btn {
   padding: 4px 8px;

package/server/views/required_env_editor.ejs

@@ -107,7 +107,7 @@ body.dark .env-item label {
   color: cornflowerblue;
 }
 .env-item label {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   display: block;
   margin-bottom: 5px;
   font-weight: bold;
@@ -133,7 +133,7 @@ body.dark .comment {
   padding-left: 10px;
 }
 #save {
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   width: 100%;
   box-sizing: border-box;
   text-align: center;