pinokiod 3.19.80 → 3.19.82

package/kernel/bin/setup.js

@@ -122,12 +122,15 @@ module.exports = {
       { name: "node", },
       { name: "cli", },
       { name: "uv", },
+      { name: "caddy", },
+      { name: "py", },
     ])
     let conda_requirements = [
       zip_cmd,
       "uv",
       "node",
       "git",
+      "caddy",
     ]
     if (platform === "win32") {
       requirements.push({ name: "registry" })

package/kernel/connect/providers/github/README.md

@@ -1,7 +1,3 @@
----
-
-# Usage
-
 When you log into Github here, the login will be used for the git installed within Pinokio.
 
 Logging into Github lets you do things like:

package/kernel/prototype.js

@@ -36,12 +36,12 @@ class Proto {
           process.stdout.write(e.raw)
         })
       }
-      let exists3 = await this.kernel.exists("prototype/CLI.md")
+      let exists3 = await this.kernel.exists("prototype/PTERM.md")
       if (!exists3) {
         await this.kernel.download({
           uri: "https://raw.githubusercontent.com/pinokiocomputer/pterm/refs/heads/main/README.md",
           path: this.kernel.path("prototype"),
-          filename: "CLI.md"
+          filename: "PTERM.md"
         }, (e) => {
           process.stdout.write(e.raw)
         })
@@ -73,9 +73,9 @@ class Proto {
       let readme_path = this.kernel.path("prototype/PINOKIO.md")
       await fs.promises.cp(readme_path, path.resolve(cwd, name, "PINOKIO.md"))
 
-      // copy cli.md
-      let cli_readme_path = this.kernel.path("prototype/CLI.md")
-      await fs.promises.cp(cli_readme_path, path.resolve(cwd, name, "CLI.md"))
+      // copy pterm.md
+      let cli_readme_path = this.kernel.path("prototype/PTERM.md")
+      await fs.promises.cp(cli_readme_path, path.resolve(cwd, name, "PTERM.md"))
 
 
       return { success: "/p/" + name }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "3.19.80",
+  "version": "3.19.82",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/index.js

@@ -4424,6 +4424,23 @@ class Server {
       let dir = this.kernel.path("api", req.params[0])
       let config = await this.kernel.git.config(dir)
 
+      let hosts = ""
+      let hosts_file = this.kernel.path("config/gh/hosts.yml")
+      let e = await this.exists(hosts_file)
+      console.log({ hosts_file, e })
+      if (e) {
+        hosts = await fs.promises.readFile(hosts_file, "utf8")
+        console.log( { hosts: `#${hosts}#` })
+        if (hosts.startsWith("{}")) {
+          hosts = ""
+        }
+      }
+      console.log("hosts", hosts)
+
+      let connected = (hosts.length > 0)
+      console.log({ connected })
+
+
       let remote = null
       if (config["remote \"origin\""]) {
         remote = config["remote \"origin\""].url
@@ -4490,7 +4507,10 @@ class Server {
         console.log("git status matrix error", err)
       }
 
+
+
       res.render("git", {
+        connected,
         changes,
         dir,
         config,

package/server/views/editor.ejs

@@ -155,13 +155,17 @@ document.addEventListener("DOMContentLoaded", async () => {
   <% } %>
   <% if (!install_required) { %>
     let editor = ace.edit("editor");
-    editor.setTheme("ace/theme/tomorrow");
     //editor.setTheme("ace/theme/github_light_default");
     //editor.setTheme("ace/theme/ambiance");
-    //editor.setTheme("ace/theme/idle_fingers");
+    <% if (theme === "dark") { %>
+      editor.setTheme("ace/theme/idle_fingers");
+    <% } else { %>
+      editor.setTheme("ace/theme/tomorrow");
+    <% } %>
     //editor.setTheme("ace/theme/nord_dark");
     //editor.setTheme("ace/theme/textmate");
     editor.setOptions({
+      wrap: true,
 //      maxLines: Infinity, // set to a large number
       minLines: 1 // set to a small number
     });

package/server/views/git.ejs

@@ -4,7 +4,7 @@
 <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"/>
+<script src="/opener.js"></script>
 <% if (agent === "electron") { %>
   <link href="/electron.css" rel="stylesheet"/>
 <% } %>
@@ -14,10 +14,43 @@
   max-width: 800px;
   box-sizing: border-box;
 }
+body {
+  margin: 0;
+  font-family: Sans-serif;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+aside {
+  min-width: 200px;
+  position: sticky;
+  top: 0;
+}
+aside .item.selected {
+  background: royalblue;
+  color: white;
+}
+aside .item {
+  display: block;
+  text-decoration: none;
+  color: royalblue;
+  padding: 10px;
+  background: rgba(0,0,0,0.1);
+}
+nav {
+  padding: 10px;
+  display: flex;
+}
+/*
 nav {
   position: sticky;
   top: 0;
 }
+*/
+body.dark nav a.btn, nav a.btn {
+  background: royalblue;
+}
 nav a {
   display: block;
   padding: 10px;
@@ -27,12 +60,18 @@ label {
   display: block;
   padding: 10px;
 }
+body.dark nav {
+  background: rgba(0,0,0,0.4);
+}
 nav label {
   display: block;
   padding: 10px;
 }
 main {
-  padding: 20px;
+  display: flex;
+  overflow: auto;
+  scroll-behavior: smooth;
+  flex-grow: 1;
 }
 main iframe {
   width: 100%;
@@ -42,7 +81,16 @@ main img {
   width: 100%;
 }
 main h2 {
-  margin: 0 0 10px;
+  padding: 20px 10px;
+  margin: 0;
+  font-size: 16px;
+}
+body.dark .changes {
+  color: white;
+}
+.changes {
+  height: 100%;
+  flex-grow: 1;
 }
 pre.l {
 /*
@@ -90,61 +138,146 @@ pre.l {
   color: #555;
 }
 .diff-block {
-  max-height: 300px;
   background: rgba(0, 0, 0, 0.04);
-  padding: 0 20px 20px;
   overflow: auto;
 }
+body.dark h2 {
+  color: white;
+}
+body.dark main h3 {
+  color: white;
+}
 main h3 {
   margin: 0;
   background: rgba(0, 0, 0, 0.04);
   padding: 15px;
-  margin-top: 30px;
   font-size: 14px;
 }
+body.dark .chunk {
+  border: 10px solid white;
+}
+.chunk {
+  border: 10px solid silver;
+  margin-bottom: 10px;
+}
+.filler {
+  height: 100%;
+}
+.chunk.selected, body.dark .chunk.selected {
+  border: 10px solid royalblue; 
+}
 
 .add    { background: #e6ffed; color: green; }
 .del    { background: #ffeef0; color: red; }
 .context { background: #f8f8f8; }
 .btn {
   margin-right: 10px;
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+  padding: 10px;
+  border-radius: 3px;
+  background: black;
+  color: white;
+  font-size: 12px;
+  display: inline-block;
+}
+body.dark .empty {
+  background: rgba(255,255,255,0.1);
+}
+.empty {
+  text-align: center;
+  padding: 200px 40px;
+  opacity: 0.5;
+  background: rgba(0,0,0,0.04);
 }
 </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>
+    <% if (connected) { %>
+      <a href="/run/scripts/git/push.json?cwd=<%=encodeURIComponent(dir)%>" class='btn'><i class="fa-brands fa-github"></i> Publish to GitHub</a>
+    <% } else { %>
+      <a class='btn' data-redirect="/github" target="_blank">Publish to 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>
     <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>
+    <% if (connected) { %>
+      <a href="/run/scripts/git/create.json?cwd=<%=encodeURIComponent(dir)%>" class='btn'><i class="fa-brands fa-github"></i> Create on GitHub</a>
+    <% } else { %>
+      <a class='btn' data-redirect="/github" target="_blank">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>
+  <aside>
+    <h2><i class="fa-solid fa-code-compare"></i> Changes</h2>
+    <% if (changes && changes.length > 0) { %>
+      <% changes.forEach(({ file, status, binary, diff, webpath }) => { %>
+        <a class='item' data-selector="<%=file%>" href="#<%=file%>"><%=file%></a>
+      <% }) %>
+    <% } %>
+  </aside>
+  <div class='changes'>
+    <% if (changes && changes.length > 0) { %>
+      <% changes.forEach(({ file, status, binary, diff, webpath }) => { %>
+        <div id="<%=file%>" class='chunk' data-selection="<%=file%>">
+          <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>
+          <% } %>
+        </div>
+      <% }); %>
+      <div class='filler'></div>
     <% } 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>
+      <div class='empty'>No changes</div>
     <% } %>
-  <% }); %>
-<% } else { %>
-  <div class='empty'>No changes</div>
-<% } %>
+  </div>
 </main>
+<script>
+document.querySelector("nav").addEventListener("click", (e) => {
+  let redirect = e.target.getAttribute("[data-redirect]")
+  if (redirect) {
+    const c = confirm("Please connect with GitHub first")
+    if (c) {
+      console.log("redirect")
+    } else {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  }
+})
+document.querySelector("aside").addEventListener("click", (e) => {
+  if (e.target.classList.contains("item")) {
+    document.querySelectorAll(".item").forEach((el) => {
+      el.classList.remove("selected")
+    })
+    e.target.classList.add("selected")
+
+
+
+    let selector = e.target.getAttribute("data-selector")
+    console.log({ selector })
+    document.querySelectorAll(".chunk").forEach((el) => {
+      el.classList.remove("selected")
+    })
+    document.querySelector(`[data-selection='${selector}']`).classList.add("selected")
+  }
+})
+</script>
 </body>
 </html>

package/server/views/github.ejs

@@ -61,8 +61,6 @@ body {
   align-items: center;
 }
 .btn {
-  margin: 5px;
-  width: 100px;
   text-align: center;
   padding: 10px;
   background: black;
@@ -108,7 +106,9 @@ main {
   display: flex;
   justify-content: center;
   margin: 0 auto;
+  /*
   max-width: 800px;
+  */
   width: 100%;
   align-items: center;
 }
@@ -126,20 +126,26 @@ main {
   display: block;
   margin-bottom: 5px;
 }
-.setup-items .gitconfig-footer .btn {
-  margin: 0 0 5px;
+.setup-items .gitconfig-footer {
+  text-align: center;
+}
+.setup-items .btn {
+  width: 100%;
+  margin-bottom: 10px;
 }
 .setup-items .gitconfig {
   flex-grow: 1;
-  padding: 30px;
-  background: rgba(0,0,0,0.04) !important;
   margin-bottom: 20px;
 }
-.setup-items pre {
+body.dark .setup-items pre, body.dark .setup-items .pre {
+  background: rgba(255,255,255,0.04) !important;
+}
+.setup-items pre, .setup-items .pre {
+  box-sizing: border-box;
+  margin: 10px 0 20px;
   width: 100%;
-  padding: 30px;
+  padding: 20px;
   background: rgba(0,0,0,0.04) !important;
-  margin-bottom: 20px;
 }
 .head {
   padding: 30px;
@@ -194,7 +200,28 @@ hr {
 }
 #readme {
   flex-grow: 1;
-  padding: 30px;
+}
+.cols {
+  max-width: 1000px;
+  margin: 0 auto;
+  display: flex; 
+}
+body.dark .column {
+  background: rgba(0,0,0,0.1);
+}
+.column {
+  background: rgba(0,0,0,0.04);
+  margin: 10px;
+  width: 50%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+.column h1 {
+  padding: 5px;
+  letter-spacing: -1px;
+}
+ol {
+  padding-inline-start: 20px;
 }
 </style>
 <script src="/hotkeys.min.js"></script>
@@ -226,38 +253,48 @@ hr {
   <div class='head'>
     <h3><i class="fa-brands fa-github"></i><br><br>Connect with Github</h3>
   </div>
-  <div class='setup-items'>
-    <form class='gitconfig'>
-      <div class='field'>
-        <label>username</label>
-        <input id='username' type='text' value="<%=gitconfig.user && gitconfig.user.name ? gitconfig.user.name : ''%>">
+  <div class='cols'>
+    <div class='column'>
+      <h1>GitHub</h1>
+      <div class='setup-items'>
+        <% if (hosts.length > 0) { %>
+          <pre><%=hosts%></pre>
+        <% } else { %>
+          <pre>not logged in</pre>
+        <% } %>
       </div>
-      <div class='field'>
-        <label>email</label>
-        <input id='email' type='text' value="<%=gitconfig.user && gitconfig.user.email ? gitconfig.user.email : ''%>">
+      <div class='setup-items'>
+        <% items.forEach((item) => { %>
+          <a class='btn' href="<%=item.url%>">
+            <i class="<%=item.icon%>"></i> <%=item.title%>
+          </a>
+        <% }) %>
       </div>
-      <div class='gitconfig-footer'>
-        <button class='btn'>Update</button>
-        <div>gitconfig stored in ~/pinokio/gitconfig file </div>
+      <div class='setup-items'>
+        <div id='readme'><%-readme%></div>
       </div>
-    </form>
-  </div>
-  <div class='setup-items'>
-    <% if (hosts.length > 0) { %>
-      <pre><%=hosts%></pre>
-    <% } else { %>
-      <pre>not logged in</pre>
-    <% } %>
-  </div>
-  <div class='setup-items'>
-    <% items.forEach((item) => { %>
-      <a class='btn' href="<%=item.url%>">
-        <i class="<%=item.icon%>"></i> <%=item.title%>
-      </a>
-    <% }) %>
-  </div>
-  <div class='setup-items'>
-    <div id='readme'><%-readme%></div>
+    </div>
+    <div class='column'>
+      <h1>Git Config</h1>
+      <div class='setup-items'>
+        <form class='gitconfig'>
+          <div class='pre'>
+            <div class='field'>
+              <label>username</label>
+              <input id='username' type='text' value="<%=gitconfig.user && gitconfig.user.name ? gitconfig.user.name : ''%>">
+            </div>
+            <div class='field'>
+              <label>email</label>
+              <input id='email' type='text' value="<%=gitconfig.user && gitconfig.user.email ? gitconfig.user.email : ''%>">
+            </div>
+          </div>
+          <div class='gitconfig-footer'>
+            <button class='btn'><i class="fa-solid fa-check"></i> Update</button>
+            <div>gitconfig stored in ~/pinokio/gitconfig file </div>
+          </div>
+        </form>
+      </div>
+    </div>
   </div>
 </main>
 <script>