pinokiod 3.19.2 → 3.19.4

package/server/public/style.css

@@ -86,6 +86,12 @@ body.dark *::-webkit-scrollbar-thumb {
   border: 7px solid rgba(255,255,255,0.3);
 }
 
+@font-face {
+  font-family: 'RobotoMono';
+  src: url('./RobotoMono-Regular.ttf') format(truetype);
+  font-weight: normal;
+  font-style: normal;
+}
 @font-face {
   font-family: 'SpaceMono';
   src: url('./SpaceMono-Regular.ttf') format(truetype);
@@ -115,6 +121,9 @@ body.dark *::-webkit-scrollbar-thumb {
 .drawer.vertical-collapsed {
   max-height: 0;
 }
+.git.selected {
+  border-left: 10px solid royalblue;
+}
 body.dark .dynamic.selected {
   border-left: 10px solid royalblue;
 }
@@ -947,8 +956,9 @@ body.columns .containers {
 .xterm-rows {
 /*
   font-family: "SpaceMono", monospace !important;
-  */
   font-family: "SourceCode", monospace !important;
+  */
+  font-family: "RobotoMono", monospace !important;
   font-weight: 400 !important;
   font-style: normal !important;
 

package/server/socket.js

@@ -1,8 +1,10 @@
 const WebSocket = require('ws');
+const path = require('path')
 const Util = require("../kernel/util")
 class Socket {
   constructor(parent) {
     this.buffer = {}
+    this.sessions = {}
     this.connected = {}
     this.active_shell = {}
     this.parent = parent
@@ -168,6 +170,80 @@ class Socket {
       headers.push('Access-Control-Allow-Origin: *');
       headers.push('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
     });
+
+    this.interval = setInterval(async () => {
+      for(let key in this.buffer) {
+        let buf = this.buffer[key]
+        if (this.old_buffer[key] !== buf) {
+
+          /*
+            
+            dev
+              /Users/x/pinokio/plugin/dev/claude.json?cwd=/Users/x/pinokio/api/audioplay
+              /Users/x/pinokio/plugin/dev/gemini.json?cwd=/Users/x/pinokio/api/audioplay
+
+            api 
+              /Users/x/pinokio/api/audioplay/start.json
+
+            shell
+              facefusion-pinokio.git_0.0_a56eb7d48c9e96d8a5217d625d83d204
+              facefusion-pinokio.git_0.0_a56eb7d48c9e96d8a5217d625d83d204
+              audioplay_0.0_a56eb7d48c9e96d8a5217d625d83d204
+          */
+
+          // 1. dev
+          if (path.isAbsolute(key)) {
+            let p = key.replace(/\?.*$/, '')
+            let relative = path.relative(this.parent.kernel.homedir, p)
+            if (relative.startsWith("plugin")) {
+              // dev
+              let m = /\?.*$/.exec(key)
+              if (m && m.length > 0) {
+                /*
+                DEV Changed {
+                  cwd: '/Users/x/pinokio/api/audioplay',
+                  relative: 'plugin/dev/claude.json'
+                }
+                */
+                let paramStr = m[0]
+                let cwd = new URL("http://localhost" + paramStr).searchParams.get("cwd")
+                let session = this.sessions[key]
+                let logpath = path.resolve(cwd, "logs/dev", path.parse(relative).base)
+                await Util.log(logpath, buf, session)
+
+              }
+            } else if (relative.startsWith("api")) {
+              // api
+              /*
+              API Changed {
+                cwd: '/Users/x/pinokio/api/audioplay/start.json',
+                filepath: [ 'start.json' ]
+              }
+              */
+              let filepath_chunks = relative.split(path.sep).slice(2)
+              let cwd = this.parent.kernel.path(...relative.split(path.sep).slice(0, 2))
+              let session = this.sessions[key]
+              let logpath = path.resolve(cwd, "logs/api", ...filepath_chunks)
+              await Util.log(logpath, buf, session)
+            }
+          } else {
+            // SHELL
+            /*
+            SHELL Changed { cwd: '/Users/x/pinokio/api/kernel.api.stop', key: 'kernel.api.stop' }
+            */
+            let cwd = this.parent.kernel.path("api", key.split("_")[0])
+            let session = this.sessions[key]
+            let logpath = path.resolve(cwd, "logs/shell")
+            await Util.log(logpath, buf, session)
+
+
+          }
+        } else {
+//          console.log(`State hasn't changed: ${key}`)
+        }
+      }
+      this.old_buffer = structuredClone(this.buffer)
+    }, 5000)
   }
   subscribe(ws, id, buf, sh) {
 
@@ -215,10 +291,20 @@ class Socket {
       });
     }
 
+    if (e.data && e.data.type === "shell.kill") {
+      // when shell is killed, reset the buffer
+      delete this.buffer[id]
+      delete this.sessions[id]
+    }
+
     if (!this.buffer[id]) {
       this.buffer[id] = ""
+      if (!this.sessions[id]) {
+        this.sessions[id] = "" + Date.now()
+      }
     }
-    if (e.data && e.data.raw) this.buffer[id] += e.data.raw
+    //if (e.data && e.data.raw) this.buffer[id] += e.data.raw
+    if (e.data && e.data.buf) this.buffer[id] = e.data.buf
 
     if (e.data && e.data.shell_id) {
       this.active_shell[id] = e.data.shell_id
@@ -256,7 +342,8 @@ class Socket {
       if (!this.buffer[caller]) {
         this.buffer[caller] = ""
       }
-      if (e.data.raw) this.buffer[caller] += e.data.raw
+      //if (e.data.raw) this.buffer[caller] += e.data.raw
+      if (e.data.buf) this.buffer[caller] = e.data.buf
 
       if (e.data && e.data.shell_id) {
         this.active_shell[caller] = e.data.shell_id

package/server/views/app.ejs

@@ -637,8 +637,8 @@ body.dark .submenu {
 }
 .disk-usage {
   flex-grow: 1;
-  text-align: right;
   font-weight: bold;
+  text-align: right;
 }
 .disk-usage i {
   margin-right: 5px;
@@ -669,6 +669,18 @@ body.dark .submenu {
 body.dark .appcanvas {
   border-top: 1px solid rgba(255,255,255,0.04);
 }
+.filler {
+  display: none;
+}
+
+@media only screen and (max-width: 1000px) {
+  .url-bar {
+    display: none;
+  }
+  .filler {
+    display: block;
+  }
+}
 
 @media only screen and (max-width: 480px) {
   nav .btn2 {
@@ -747,6 +759,7 @@ body.dark .appcanvas {
 <button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div><div>Prev</div></button>
 <button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div><div>Next</div></button>
 <button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div><div>Refresh</div></button>
+<div class='flexible filler'></div>
 <div class='url-bar'>
   <% if (current_urls.https) { %>
     <a class='https-url' target="_blank" href="<%=current_urls.https%>"><i class="fa-solid fa-square-arrow-up-right"></i> <%=current_urls.https%></a>
@@ -822,15 +835,13 @@ body.dark .appcanvas {
   </div>
   <div class='m n system' data-type="n">
     <a target="<%=src%>" href="<%=src%>" class='btn header-item frame-link' data-index="0" data-mode="refresh">
-      <div class='tab'><i class="fa-regular fa-folder-open"></i> Files <div class='disk-usage'></div></div>
+      <div class='tab'>
+        <i class="fa-regular fa-folder-open"></i> Files <div class='disk-usage'></div>
+      </div>
+      <div class='loader'>
+        <i id='open-folder' data-filepath="<%=path%>" class="fa-solid fa-up-right-from-square"></i>
+      </div>
     </a>
-    <% if (config.init_required) { %>
-      <a data-init class='btn header-item frame-link' href="/prototype?type=init&path=<%=path%>" target="/prototype?type=init&path=<%=path%>" data-index="1" data-mode="refresh">
-        <div class='tab'>
-          <i class='fa-solid fa-bolt'></i> Initialize
-        </div>
-      </a>
-    <% } %>
     <% if (profile || feed) { %>
       <div class='btn header-item frame-link revealer' data-group='.info-group'>
         <div class='tab'>
@@ -856,6 +867,21 @@ body.dark .appcanvas {
       <%- include('./partials/dynamic', { dynamic: plugin_menu, }) %>
       <% } %>
     </div>
+    <% if (type === "browse") { %>
+      <div class='nested-menu selected git'>
+        <div class='btn header-item frame-link reveal'>
+          <div class='tab'><i class="fa-solid fa-cloud"></i> Git</div>
+          <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
+        </div>
+        <div class='submenu'>
+          <% repos.forEach((git, index) => { %>
+            <a target="/git/<%=git.gitParentRelPath%>" href="/git/<%=git.gitParentRelPath%>" class='btn header-item frame-link' data-index="<%=index%>" data-mode="refresh">
+              <div class='tab'><i class="fa-regular fa-folder-open"></i> <%=git.gitRelPath%></div>
+            </a>
+          <% }) %>
+        </div>
+      </div>
+    <% } %>
     <div class='btn header-item frame-link revealer' data-group='.config-group'>
       <div class='tab'>
         <i class='fa-solid fa-gear'></i> Settings
@@ -886,6 +912,17 @@ body.dark .appcanvas {
     <%})%>
   </div>
   <div class='flexible'></div>
+  <div class='header-top header-item'>
+    <div class='app-info'>
+      <% if (type === 'run') { %>
+        <div class='mode-section'>
+          <h3><i class='fa-solid fa-circle-play'></i> Run mode</h3>
+          <div class='desc'>Switch to dev mode to make changes to the app.</div>
+          <a class='btn' href="<%=home.endsWith("/") ? home : home + "/" %>dev"><i class="fa-solid fa-code"></i> Switch to Dev mode</a>
+        </div>
+      <% } %>
+    </div>
+  </div>
   <!--
   <div class='tabmenu'>
     <div id='new-tab' class='btn header-item'><div class='tab'><i class="fa-solid fa-plus"></i> New</div></div>

package/server/views/file_explorer.ejs

@@ -174,12 +174,11 @@ body.dark .browser-options-row {
     <a class='path' href="<%=path.path%>"><%-path.name%></a>
   <% } %>
 <% }) %>
+<% if (display.includes("form")) { %>
 <form class='search'>
-  <% if (display.includes("form")) { %>
-    <input type='search' class="flexible" placeholder='Filter downloaded apps'>
-  <% } else { %>
-  <% } %>
+  <input type='search' class="flexible" placeholder='Filter downloaded apps'>
 </form>
+<% } %>
 <% if (ishome) { %>
   <div class='nav-btns'>
     <a class='btn2' href="<%=portal%>" target="_blank"><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>

package/server/views/git.ejs

@@ -0,0 +1,149 @@
+<html>
+<head>
+<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"/>
+<% if (agent === "electron") { %>
+  <link href="/electron.css" rel="stylesheet"/>
+<% } %>
+<style>
+.container {
+  padding: 20px;
+  max-width: 800px;
+  box-sizing: border-box;
+}
+nav {
+  position: sticky;
+  top: 0;
+}
+nav a {
+  display: block;
+  padding: 10px;
+  color: royalblue;
+}
+label {
+  display: block;
+  padding: 10px;
+}
+nav label {
+  display: block;
+  padding: 10px;
+}
+main {
+  padding: 20px;
+}
+main iframe {
+  width: 100%;
+  height: 500px;
+}
+main img {
+  width: 100%;
+}
+main h2 {
+  margin: 0 0 10px;
+}
+pre.l {
+/*
+  white-space: pre-wrap;
+  font-family: monospace;
+  */
+  padding: 0 10px;
+  border-left: 4px solid transparent;
+}
+.added    { background: #e6ffed; border-color: green; }
+.removed  { background: #ffeef0; border-color: red; }
+
+
+.diff-line {
+  display: flex;
+  white-space: pre-wrap;
+  font-family: monospace;
+  line-height: 1.4;
+}
+
+.lnum {
+  width: 3em;
+  flex-shrink: 0;
+  text-align: right;
+  padding-right: 0.5em;
+  color: #999;
+}
+
+.lnum.old {
+  border-right: 1px solid #ccc;
+}
+
+.lnum.new {
+  border-right: 1px solid #ccc;
+}
+
+.code {
+  flex: 1;
+  padding-left: 0.5em;
+}
+.binary-notice {
+  background: #f0f0f0;
+  font-family: monospace;
+  padding: 0.5em;
+  color: #555;
+}
+.diff-block {
+  max-height: 300px;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 0 20px 20px;
+  overflow: auto;
+}
+main h3 {
+  margin: 0;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 15px;
+  margin-top: 30px;
+  font-size: 14px;
+}
+
+.add    { background: #e6ffed; color: green; }
+.del    { background: #ffeef0; color: red; }
+.context { background: #f8f8f8; }
+.btn {
+  margin-right: 10px;
+}
+</style>
+</head>
+<body class='<%=theme%>' data-platform="<%=platform%>" data-agent="<%=agent%>">
+<nav>
+  <% if (remote) { %>
+    <a href="/run/scripts/git/push.json?cwd=<%=encodeURIComponent(dir)%>" class='btn'><i class="fa-brands fa-github"></i> Publish to GitHub</a>
+    <a href="<%=remote%>" target="_blank"><%=remote%></a>
+  <% } else { %>
+    <a href="/run/scripts/git/create.json?cwd=<%=encodeURIComponent(dir)%>" class='btn'><i class="fa-brands fa-github"></i> Create on GitHub</a>
+  <% } %>
+  <a href="/run/scripts/git/commit.json?cwd=<%=encodeURIComponent(dir)%>" class='btn'><i class="fa-solid fa-floppy-disk"></i> Commit (Save the current version)</a>
+</nav>
+<main>
+<h2>Changed Files</h2>
+<% if (changes && changes.length > 0) { %>
+  <% changes.forEach(({ file, status, binary, diff, webpath }) => { %>
+    <h3>[<%= status %>] <%= file %></h3>
+    <% if (binary) { %>
+      <div class="binary-notice">[Binary file <%= status %>]</div>
+      <iframe src="<%=webpath%>"></iframe>
+    <% } else { %>
+      <div class="diff-block">
+        <% diff.forEach(({ line, lineOld, lineNew, type }) => { %>
+          <div class="diff-line <%= type %>">
+            <span class="lnum old"><%= lineOld !== '' ? lineOld : '' %></span>
+            <span class="lnum new"><%= lineNew !== '' ? lineNew : '' %></span>
+            <span class="code"><%= (type === 'add' ? '+ ' : type === 'del' ? '- ' : '  ') + line %></span>
+          </div>
+        <% }); %>
+      </div>
+    <% } %>
+  <% }); %>
+<% } else { %>
+  <div class='empty'>No changes</div>
+<% } %>
+</main>
+</body>
+</html>

package/server/views/install.ejs

@@ -155,6 +155,9 @@ const createTerm = async (_theme) => {
     selectionBackground: "red",
     selectionForeground: "white"
   })
+  <% if (theme !== "dark") { %>
+    theme.foreground = "black"
+  <% } %>
   let config = {
     scrollback: 9999999,
     fontSize: 14,