pinokiod 3.111.0 → 3.112.0

package/kernel/plugin.js

@@ -14,13 +14,25 @@ class Plugin {
     let plugins = []
     for(let plugin_path of plugin_paths) {
       let config = await this.kernel.require(path.resolve(plugin_dir, plugin_path))
-      let chunks = plugin_path.split(path.sep)
-      let cwd = chunks.slice(0, -1).join("/")
-      config.image = "/asset/plugin/" + cwd + "/" + config.icon 
-      plugins.push({
-        href: "/run/plugin/" + chunks.join("/"),
-        ...config
-      })
+      if (config && config.run && Array.isArray(config.run)) {
+        let invalid
+        for(let key in config) {
+          if (typeof config[key] === "function") {
+            invalid = true
+          }
+        }
+        if (invalid) {
+          continue
+        }
+
+        let chunks = plugin_path.split(path.sep)
+        let cwd = chunks.slice(0, -1).join("/")
+        config.image = "/asset/plugin/" + cwd + "/" + config.icon 
+        plugins.push({
+          href: "/run/plugin/" + chunks.join("/"),
+          ...config
+        })
+      }
     }
 
     this.config = {

package/package.json

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

package/server/index.js

@@ -85,20 +85,21 @@ class Server {
     this.cf = new Cloudflare()
     this.virtualEnvCache = new Map()
     this.gitStatusIgnorePatterns = [
-      /^node_modules\//,
-      /^vendor\//,
-      /^\.venv\//,
-      /^venv\//,
-      /^\.virtualenv\//,
-      /^env\//,
-      /^__pycache__\//,
-      /^build\//,
-      /^dist\//,
-      /^tmp\//,
-      /^\.cache\//,
-      /^\.mypy_cache\//,
-      /^\.pytest_cache\//,
-      /^\.git\//
+      /(^|\/)node_modules\//,
+//      /(^|\/)vendor\//,
+      /(^|\/)__pycache__\//,
+//      /(^|\/)build\//,
+//      /(^|\/)dist\//,
+//      /(^|\/)tmp\//,
+      /(^|\/)\.cache\//,
+      /(^|\/)\.ruff_cache\//,
+      /(^|\/)\.tox\//,
+      /(^|\/)\.terraform\//,
+      /(^|\/)\.parcel-cache\//,
+      /(^|\/)\.webpack\//,
+      /(^|\/)\.mypy_cache\//,
+      /(^|\/)\.pytest_cache\//,
+      /(^|\/)\.git\//
     ]
 
     // sometimes the C:\Windows\System32 is not in PATH, need to add
@@ -1374,6 +1375,25 @@ class Server {
       let { requirements, install_required, requirements_pending, error } = await this.kernel.bin.check({
         bin: this.kernel.bin.preset("ai"),
       })
+      let sanitizedPath = null
+      if (typeof req.query.path === 'string') {
+        let trimmed = req.query.path.trim()
+        if (trimmed) {
+          trimmed = trimmed.replace(/^~[\\/]?/, '').replace(/^[\\/]+/, '')
+          if (trimmed) {
+            const segments = trimmed.split(/[\\/]+/).filter(Boolean)
+            if (segments.length > 0 && !segments.some((segment) => segment === '.' || segment === '..')) {
+              sanitizedPath = segments.join('/')
+              try {
+                await fs.promises.mkdir(path.resolve(this.kernel.homedir, sanitizedPath), { recursive: true })
+              } catch (mkdirErr) {
+                console.warn('Failed to ensure download path exists', mkdirErr)
+                sanitizedPath = null
+              }
+            }
+          }
+        }
+      }
       res.render("download", {
         portal: this.portal,
         error,
@@ -1386,7 +1406,7 @@ class Server {
         agent: req.agent,
         userdir: this.kernel.api.userdir,
         display: ["form"],
-        query: req.query
+        query: sanitizedPath ? { ...req.query, path: sanitizedPath } : req.query
       })
     } else if (pathComponents.length === 0 && req.query.mode === "settings") {
       let system_env = {}
@@ -3766,6 +3786,94 @@ class Server {
         list,
       })
     }))
+    this.app.get("/terminals", ex(async (req, res) => {
+      if (!this.kernel.plugin.config) {
+        try {
+          await this.kernel.plugin.init()
+        } catch (err) {
+          console.warn('Failed to initialize plugins', err)
+        }
+      }
+      const pluginMenu = this.kernel.plugin && this.kernel.plugin.config && Array.isArray(this.kernel.plugin.config.menu)
+        ? this.kernel.plugin.config.menu
+        : []
+
+      const apps = []
+      try {
+        const apipath = this.kernel.path("api")
+        const entries = await fs.promises.readdir(apipath, { withFileTypes: true })
+        for (const entry of entries) {
+          let type
+          try {
+            type = await Util.file_type(apipath, entry)
+          } catch (typeErr) {
+            console.warn('Failed to inspect api entry', entry.name, typeErr)
+            continue
+          }
+          if (!type || !type.directory) {
+            continue
+          }
+          try {
+            const meta = await this.kernel.api.meta(entry.name)
+            const absolutePath = meta && meta.path ? meta.path : this.kernel.path("api", entry.name)
+            let displayPath = absolutePath
+            if (this.kernel.homedir && absolutePath.startsWith(this.kernel.homedir)) {
+              const relative = path.relative(this.kernel.homedir, absolutePath)
+              if (!relative || relative === '.' || relative === '') {
+                displayPath = '~'
+              } else if (!relative.startsWith('..')) {
+                const normalized = relative.split(path.sep).join('/')
+                displayPath = `~/${normalized}`
+              }
+            }
+            apps.push({
+              name: entry.name,
+              title: meta && meta.title ? meta.title : entry.name,
+              description: meta && meta.description ? meta.description : '',
+              icon: meta && meta.icon ? meta.icon : "/pinokio-black.png",
+              cwd: absolutePath,
+              displayPath
+            })
+          } catch (metaError) {
+            console.warn('Failed to load app metadata', entry.name, metaError)
+            const fallbackPath = this.kernel.path("api", entry.name)
+            apps.push({
+              name: entry.name,
+              title: entry.name,
+              description: '',
+              icon: "/pinokio-black.png",
+              cwd: fallbackPath,
+              displayPath: fallbackPath
+            })
+          }
+        }
+      } catch (enumerationError) {
+        console.warn('Failed to enumerate api apps for plugin modal', enumerationError)
+      }
+
+      apps.sort((a, b) => {
+        const at = (a.title || a.name || '').toLowerCase()
+        const bt = (b.title || b.name || '').toLowerCase()
+        if (at < bt) return -1
+        if (at > bt) return 1
+        return (a.name || '').localeCompare(b.name || '')
+      })
+
+      const list = this.getPeers()
+      res.render("terminals", {
+        current_host: this.kernel.peer.host,
+        pluginMenu,
+        apps,
+        portal: this.portal,
+        logo: this.logo,
+        theme: this.theme,
+        agent: req.agent,
+        list,
+      })
+    }))
+    this.app.get("/plugins", (req, res) => {
+      res.redirect(301, "/terminals")
+    })
     this.app.get("/screenshots", ex(async (req, res) => {
       let list = this.getPeers()
       res.render("screenshots", {

package/server/public/common.js

@@ -1592,6 +1592,8 @@ document.addEventListener("DOMContentLoaded", () => {
   }
   if (document.querySelector("#refresh-page")) {
     document.querySelector("#refresh-page").addEventListener("click", (e) => {
+      location.reload()
+      /*
       let browserview = document.querySelector(".browserview")
       if (browserview) {
         let iframe = browserview.querySelector("iframe:not(.hidden)")
@@ -1604,6 +1606,7 @@ document.addEventListener("DOMContentLoaded", () => {
       } else {
         location.reload()
       }
+      */
     })
   }
   const handleSplitNavigation = async (anchor) => {

package/server/public/install.js

@@ -38,9 +38,38 @@ const installname = async (url, name) => {
     return null
   }
 }
+const DEFAULT_INSTALL_RELATIVE_PATH = 'api'
+
+// Ensure the requested install path stays within the Pinokio home directory
+const normalizeInstallPath = (rawPath) => {
+  if (typeof rawPath !== 'string') {
+    return null
+  }
+  let trimmed = rawPath.trim()
+  if (!trimmed) {
+    return null
+  }
+  // drop leading ~/ or any absolute indicators
+  trimmed = trimmed.replace(/^~[\\/]?/, '').replace(/^[\\/]+/, '')
+  if (!trimmed) {
+    return null
+  }
+  const segments = trimmed.split(/[\\/]+/).filter(Boolean)
+  if (!segments.length) {
+    return null
+  }
+  if (segments.some((segment) => segment === '.' || segment === '..')) {
+    return null
+  }
+  return segments.join('/')
+}
+
 const install = async (name, url, term, socket, options) => {
   console.log("options", options)
   const n = new N()
+  const normalizedPath = options && options.path ? normalizeInstallPath(options.path) : null
+  const targetPath = normalizedPath ? `~/${normalizedPath}` : `~/${DEFAULT_INSTALL_RELATIVE_PATH}`
+
   await new Promise((resolve, reject) => {
     socket.close()
 
@@ -68,7 +97,7 @@ const install = async (name, url, term, socket, options) => {
       },
       params: {
         message: cmd,
-        path: "~/api"
+        path: targetPath
       }
     }, (packet) => {
       if (packet.type === 'stream') {
@@ -107,10 +136,18 @@ const install = async (name, url, term, socket, options) => {
       }
     })
   } else {
-    // ask the backend to create install.json and start.json if gradio
-    //location.href = `/pinokio/browser/${name}`
-    location.href = `/initialize/${name}`
-
+    const shouldInitialize = !normalizedPath || normalizedPath === DEFAULT_INSTALL_RELATIVE_PATH
+    if (shouldInitialize) {
+      // ask the backend to create install.json and start.json if gradio
+      //location.href = `/pinokio/browser/${name}`
+      location.href = `/initialize/${name}`
+    } else {
+      n.Noty({
+        text: `Downloaded to ~/${normalizedPath}/${name}`,
+        timeout: 4000
+      })
+      location.href = "/terminals"
+    }
   }
 }
 const createTerm = async (_theme) => {

package/server/views/connect.ejs

@@ -919,6 +919,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
   <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
   <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
+  <a class='tab' href="/terminals"><i class="fa-solid fa-desktop"></i><div class='caption'>Terminals</div></a>
   <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
 </aside>
 </main>

package/server/views/index.ejs

@@ -726,6 +726,7 @@ body.dark aside .current.selected {
   <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
   <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
   <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
+  <a class='tab' href="/terminals"><i class="fa-solid fa-desktop"></i><div class='caption'>Terminals</div></a>
   <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
 </aside>
 </main>

package/server/views/init/index.ejs

@@ -1554,7 +1554,7 @@ body.dark .ace-editor {
           </button>
           <button type="button" class="tab-button" data-tab="cli">
             <div class='row'>
-              <i class="fa-solid fa-terminal"></i>
+              <i class="fa-solid fa-desktop"></i>
               <div><h5>Terminal App Launcher</h5></div>
             </div>
           </button>
@@ -1948,6 +1948,7 @@ body.dark .ace-editor {
   <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
   <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
   <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
+  <a class='tab' href="/terminals"><i class="fa-solid fa-desktop"></i><div class='caption'>Terminals</div></a>
   <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
 </aside>
 </main>

package/server/views/net.ejs

@@ -819,6 +819,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
   <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
   <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
+  <a class='tab' href="/terminals"><i class="fa-solid fa-desktop"></i><div class='caption'>Terminals</div></a>
   <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
 </aside>
 </main>

package/server/views/network.ejs

@@ -1179,6 +1179,7 @@ document.addEventListener('DOMContentLoaded', function() {
     <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
     <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
     <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
+    <a class='tab' href="/terminals"><i class="fa-solid fa-desktop"></i><div class='caption'>Terminals</div></a>
     <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
   </aside>
 </main>

package/server/views/screenshots.ejs

@@ -771,6 +771,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
   <a class='tab selected' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
   <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
+  <a class='tab' href="/terminals"><i class="fa-solid fa-desktop"></i><div class='caption'>Terminals</div></a>
   <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
 </aside>
 </main>

package/server/views/settings.ejs

@@ -566,6 +566,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
   <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
   <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
+  <a class='tab' href="/terminals"><i class="fa-solid fa-desktop"></i><div class='caption'>Terminals</div></a>
   <a class='tab selected' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
 </aside>
 </main>

package/server/views/terminals.ejs

@@ -0,0 +1,807 @@
+<html>
+<head>
+<title>Pinokio Terminals</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<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="/markdown.css" rel="stylesheet"/>
+<link href="/noty.css" rel="stylesheet"/>
+<link href="/urldropdown.css" rel="stylesheet"/>
+<link href="/style.css" rel="stylesheet"/>
+<% if (agent === "electron") { %>
+  <link href="/electron.css" rel="stylesheet"/>
+<% } %>
+<style>
+body.plugin-page main {
+  display: flex;
+}
+body.plugin-page aside {
+  width: 200px;
+  display: block;
+  flex-shrink: 0;
+}
+body.plugin-page aside .tab {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: inherit;
+  text-decoration: none;
+  padding: 10px;
+  font-size: 12px;
+  opacity: 0.5;
+  border-left: 10px solid transparent;
+  transition: color 0.2s ease, opacity 0.2s ease;
+}
+body.plugin-page aside .tab.selected {
+  font-weight: 600;
+  opacity: 1;
+}
+body.plugin-page aside .tab i {
+  width: 20px;
+  text-align: center;
+}
+body.plugin-page .plugin-container {
+  flex: 1;
+  padding: 30px 40px;
+  box-sizing: border-box;
+}
+body.plugin-page .btn-tab {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+body.plugin-page .btn-tab .btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.plugin-container h1 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 20px;
+}
+/*
+.plugin-container h1 i {
+  color: rgba(127, 91, 243, 0.9);
+}
+*/
+.plugin-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+  gap: 14px;
+}
+.plugin-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.03);
+  cursor: pointer;
+  transition: background 0.15s ease, transform 0.15s ease;
+  text-decoration: none;
+  color: inherit;
+  min-height: 68px;
+}
+.plugin-card:hover,
+.plugin-card:focus-visible {
+  background: rgba(0, 0, 0, 0.08);
+}
+.plugin-card:focus-visible {
+  outline: 2px solid rgba(127, 91, 243, 0.6);
+  outline-offset: 2px;
+}
+body.dark .plugin-card {
+  background: rgba(255, 255, 255, 0.05);
+  color: white;
+}
+body.dark .plugin-card:hover,
+body.dark .plugin-card:focus-visible {
+  background: rgba(255, 255, 255, 0.12);
+}
+.plugin-card img,
+.plugin-card .plugin-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+  background: white;
+}
+body.dark .plugin-card img,
+body.dark .plugin-card .plugin-icon {
+  background: rgba(255, 255, 255, 0.08);
+}
+.plugin-card .plugin-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.65);
+}
+body.dark .plugin-card .plugin-icon {
+  color: rgba(255, 255, 255, 0.85);
+}
+.plugin-card .plugin-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.plugin-card h2 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+.plugin-card .subtitle {
+  font-size: 12px;
+  opacity: 0.65;
+}
+body.dark .plugin-card .subtitle {
+  opacity: 0.75;
+}
+.plugin-card .plugin-info {
+  background: none;
+  border: none;
+  color: rgba(0, 0, 0, 0.55);
+  padding: 6px;
+  border-radius: 18px;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+body.dark .plugin-card .plugin-info {
+  color: rgba(255, 255, 255, 0.7);
+}
+.plugin-card .plugin-info:hover,
+.plugin-card .plugin-info:focus-visible {
+  background: rgba(0, 0, 0, 0.08);
+  color: rgba(0, 0, 0, 0.9);
+}
+body.dark .plugin-card .plugin-info:hover,
+body.dark .plugin-card .plugin-info:focus-visible {
+  background: rgba(255, 255, 255, 0.18);
+  color: rgba(255, 255, 255, 0.95);
+}
+.plugin-card .disclosure-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  color: rgba(0, 0, 0, 0.35);
+  pointer-events: none;
+  transition: transform 0.15s ease, color 0.15s ease;
+}
+.plugin-card:hover .disclosure-indicator,
+.plugin-card:focus-visible .disclosure-indicator {
+  transform: translateX(2px);
+  color: rgba(0, 0, 0, 0.65);
+}
+body.dark .plugin-card .disclosure-indicator {
+  color: rgba(255, 255, 255, 0.4);
+}
+body.dark .plugin-card:hover .disclosure-indicator,
+body.dark .plugin-card:focus-visible .disclosure-indicator {
+  color: rgba(255, 255, 255, 0.85);
+}
+.plugin-empty {
+  padding: 35px;
+  border-radius: 12px;
+  border: 1px dashed rgba(0, 0, 0, 0.12);
+  background: rgba(0, 0, 0, 0.02);
+  text-align: center;
+}
+body.dark .plugin-empty {
+  border-color: rgba(255, 255, 255, 0.16);
+  background: rgba(255, 255, 255, 0.04);
+}
+.plugin-empty p {
+  margin: 0 0 12px;
+}
+.plugin-empty code {
+  font-weight: 600;
+}
+.plugin-modal-overlay {
+  z-index: 900;
+}
+.plugin-modal-overlay .url-modal-content {
+  max-width: 520px;
+}
+.plugin-modal-overlay .plugin-modal-dropdown {
+  max-height: 360px;
+  overflow-y: auto;
+  margin-top: 14px;
+  position: static;
+  display: block;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 10px;
+  background: inherit;
+  top: auto;
+  left: auto;
+  right: auto;
+}
+.plugin-modal-overlay .plugin-modal-dropdown .url-dropdown-item {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+.plugin-modal-overlay .plugin-modal-dropdown .url-dropdown-item:last-child {
+  border-bottom: none;
+}
+body.dark .plugin-modal-overlay .url-modal-content {
+  background: rgba(25, 26, 27, 0.98);
+}
+body.dark .plugin-modal-overlay .plugin-modal-dropdown {
+  border-color: rgba(255, 255, 255, 0.15);
+  background: inherit;
+}
+body.dark .plugin-modal-overlay .plugin-modal-dropdown .url-dropdown-item {
+  border-bottom-color: rgba(255, 255, 255, 0.12);
+}
+.plugin-option {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+}
+.plugin-option .option-icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+.plugin-option img.option-icon {
+  object-fit: cover;
+  background: white;
+}
+body.dark .plugin-option .option-icon {
+  background: rgba(255, 255, 255, 0.12);
+}
+.plugin-option .option-body {
+  display: flex;
+  flex-direction: column;
+}
+.plugin-option .option-name {
+  font-weight: 600;
+}
+.plugin-option .option-path {
+  font-size: 12px;
+  opacity: 0.7;
+}
+.plugin-option .option-description {
+  font-size: 12px;
+  opacity: 0.62;
+  margin-top: 2px;
+}
+.plugin-option.selected {
+  border: 1px solid rgba(127, 91, 243, 0.6);
+  background: rgba(127, 91, 243, 0.08);
+}
+body.dark .plugin-option.selected {
+  border-color: rgba(127, 91, 243, 0.8);
+  background: rgba(127, 91, 243, 0.18);
+}
+.plugin-option:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+body.dark .plugin-option:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+.plugin-modal-overlay .url-modal-input {
+  margin-top: 18px;
+}
+@media (max-width: 800px) {
+  body.plugin-page .plugin-container {
+    padding: 20px;
+  }
+  .plugin-grid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+}
+@media (max-width: 600px) {
+  body.plugin-page main {
+    flex-direction: column;
+  }
+  body.plugin-page aside {
+    width: auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 0 20px 20px;
+  }
+  body.plugin-page aside .tab,
+  body.plugin-page aside .btn-tab {
+    border-left: none;
+    opacity: 1;
+  }
+  body.plugin-page aside .caption {
+    display: none;
+  }
+  body.plugin-page .btn-tab {
+    width: 100%;
+    justify-content: center;
+    gap: 8px;
+  }
+}
+</style>
+<% const serializedPlugins = pluginMenu.map((plugin) => {
+     const hrefValue = plugin.href || ''
+     let pluginPath = plugin.src || ''
+     const extraParams = []
+     if (hrefValue) {
+       try {
+         const parsed = new URL(hrefValue.startsWith('http') ? hrefValue : `http://localhost${hrefValue}`)
+         if (!pluginPath) {
+           pluginPath = parsed.pathname.replace(/^\/run/, '') || ''
+         }
+         parsed.searchParams.forEach((value, key) => {
+           if (key === 'cwd') {
+             return
+           }
+           extraParams.push([key, value])
+         })
+       } catch (err) {
+         console.warn('Failed to parse plugin href for serialization', hrefValue, err)
+       }
+     }
+     if (pluginPath && !pluginPath.startsWith('/')) {
+       pluginPath = `/${pluginPath}`
+     }
+     return {
+       title: plugin.title || plugin.text || plugin.name || 'Plugin',
+       description: plugin.description || '',
+       href: hrefValue,
+       link: plugin.link || '',
+       image: plugin.image || null,
+       icon: plugin.icon || null,
+       pluginPath,
+       extraParams
+     }
+   }) %>
+</head>
+<body class='<%=theme%> plugin-page' data-agent="<%=agent%>">
+<header class='grabbable'>
+<h1>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png" alt="Pinokio"></a>
+<button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
+<button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
+<button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
+<button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<div class='flexible'></div>
+<a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+  <div><i class="fa-solid fa-table-columns"></i></div>
+</a>
+<a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
+  <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
+</a>
+<button class='btn2' id='new-window' data-tippy-content="open a new window" title='open a new window' data-agent="<%=agent%>">
+  <div><i class="fa-solid fa-plus"></i></div>
+</button>
+<button class='btn2 hidden' id='close-window' data-tippy-content='close this section'>
+  <div><i class="fa-solid fa-xmark"></i></div>
+</button>
+</h1>
+</header>
+<main class='plugin-main'>
+  <div class='plugin-container'>
+    <h1><i class="fa-solid fa-desktop"></i>Terminals</h1>
+    <% if (pluginMenu.length === 0) { %>
+      <div class='plugin-empty'>
+        <p>No terminals found. Clone or add terminal definitions under <code>~/pinokio/plugin</code> to see them listed here.</p>
+        <a class='btn' href="/home?mode=download"><i class="fa-solid fa-download"></i> Download Terminals</a>
+      </div>
+    <% } else { %>
+      <div class='plugin-grid'>
+        <% pluginMenu.forEach((pluginItem, index) => { %>
+          <div class='plugin-card' role="button" tabindex="0" data-plugin-index="<%=index%>">
+            <% if (pluginItem.image) { %>
+              <img src="<%=pluginItem.image%>" alt="<%=pluginItem.title || pluginItem.text || 'Plugin'%> icon">
+            <% } else if (pluginItem.icon) { %>
+              <div class='plugin-icon'><i class="<%=pluginItem.icon%>"></i></div>
+            <% } else { %>
+              <div class='plugin-icon'><i class="fa-solid fa-desktop"></i></div>
+            <% } %>
+            <div class='plugin-details'>
+              <h2><%=pluginItem.title || pluginItem.text || pluginItem.name || 'Plugin'%></h2>
+              <% if (pluginItem.description) { %>
+                <div class='subtitle'><%=pluginItem.description%></div>
+              <% } %>
+            </div>
+            <div class='flexible'></div>
+            <% if (pluginItem.link) { %>
+              <button type='button' class='plugin-info' data-link="<%=pluginItem.link.replace(/"/g, '&quot;')%>" aria-label="Open info"><i class="fa-solid fa-circle-info"></i></button>
+            <% } %>
+            <div class='disclosure-indicator' aria-hidden="true">
+              <i class="fa-solid fa-chevron-right"></i>
+            </div>
+          </div>
+        <% }) %>
+      </div>
+    <% } %>
+  </div>
+  <aside>
+    <div class='btn-tab'>
+      <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="/home?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>
+    <a href="/network" class='tab'><i class="fa-solid fa-wifi"></i><div class='caption'>Local network</div></a>
+    <% if (list.length > 0) { %>
+      <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
+      <% list.forEach(({ host, name, platform }) => { %>
+        <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i><div class='caption'><%=name%> (<%=current_host === host ? 'this machine' : host%>)</div></a>
+      <% }) %>
+    <% } %>
+    <a href="/connect" class='tab'><i class="fa-solid fa-plug"></i><div class='caption'>Login</div></a>
+    <a class='tab' href="<%=portal%>" target="_blank"><i class="fa-solid fa-question"></i><div class='caption'>Help</div></a>
+    <a class='tab' id='genlog'><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
+    <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
+    <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
+    <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
+    <a class='tab selected' href="/terminals"><i class="fa-solid fa-desktop"></i><div class='caption'>Terminals</div></a>
+    <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
+  </aside>
+</main>
+<script type="application/json" id="plugin-data"><%- JSON.stringify(serializedPlugins) %></script>
+<script type="application/json" id="plugin-app-data"><%- JSON.stringify(apps) %></script>
+<script src="/popper.min.js"></script>
+<script src="/tippy-bundle.umd.min.js"></script>
+<script src="/hotkeys.min.js"></script>
+<script src="/sweetalert2.js"></script>
+<script src="/noty.js"></script>
+<script src="/notyq.js"></script>
+<script src="/Socket.js"></script>
+<script src="/common.js"></script>
+<script src="/urldropdown.js"></script>
+<script>
+(function() {
+  const pluginDataEl = document.getElementById('plugin-data')
+  const appDataEl = document.getElementById('plugin-app-data')
+  let plugins = []
+  let apps = []
+  try {
+    plugins = pluginDataEl ? JSON.parse(pluginDataEl.textContent) : []
+  } catch (error) {
+    console.error('Failed to parse plugin data', error)
+  }
+  try {
+    apps = appDataEl ? JSON.parse(appDataEl.textContent) : []
+  } catch (error) {
+    console.error('Failed to parse app data', error)
+  }
+
+  function escapeHtml(value) {
+    const div = document.createElement('div')
+    div.textContent = value || ''
+    return div.innerHTML
+  }
+
+  function createPluginModal(appList) {
+    const overlay = document.createElement('div')
+    overlay.id = 'plugin-modal-overlay'
+    overlay.className = 'modal-overlay url-modal-overlay plugin-modal-overlay'
+
+    overlay.innerHTML = `
+      <div class="url-modal-content" role="dialog" aria-modal="true" aria-labelledby="plugin-modal-title" aria-describedby="plugin-modal-description">
+        <button type="button" class="url-modal-close" aria-label="Close">&times;</button>
+        <h3 id="plugin-modal-title">Run Plugin</h3>
+        <p class="url-modal-description" id="plugin-modal-description">Choose a project to open the terminal from.</p>
+        <input type="search" class="url-modal-input" placeholder="Filter projects" autocomplete="off" />
+        <div class="url-dropdown plugin-modal-dropdown"></div>
+        <div class="url-modal-actions single">
+          <button type="button" class="url-modal-button cancel">Close</button>
+        </div>
+      </div>
+    `
+
+    document.body.appendChild(overlay)
+
+    const content = overlay.querySelector('.url-modal-content')
+    const closeButton = overlay.querySelector('.url-modal-close')
+    const cancelButton = overlay.querySelector('.url-modal-button.cancel')
+    const titleEl = overlay.querySelector('#plugin-modal-title')
+    const descriptionEl = overlay.querySelector('#plugin-modal-description')
+    const inputEl = overlay.querySelector('.url-modal-input')
+    const dropdownEl = overlay.querySelector('.plugin-modal-dropdown')
+
+    const state = {
+      apps: Array.isArray(appList) ? appList : [],
+      plugin: null,
+      selectedIndex: -1,
+      selectedElement: null,
+      visibleIndices: []
+    }
+
+    function clearSelection() {
+      if (state.selectedElement) {
+        state.selectedElement.classList.remove('selected')
+      }
+      state.selectedElement = null
+      state.selectedIndex = -1
+    }
+
+    function ensureVisible(element) {
+      if (!element) return
+      element.scrollIntoView({ block: 'nearest' })
+    }
+
+    function select(index, element, { autoLaunch = false } = {}) {
+      if (state.selectedElement && state.selectedElement !== element) {
+        state.selectedElement.classList.remove('selected')
+      }
+      state.selectedElement = element || null
+      state.selectedIndex = typeof index === 'number' ? index : -1
+      if (state.selectedElement) {
+        state.selectedElement.classList.add('selected')
+        if (autoLaunch) {
+          confirm()
+        }
+      }
+    }
+
+    function buildOption(app, index) {
+      const option = document.createElement('div')
+      option.className = 'url-dropdown-item plugin-option'
+      option.setAttribute('data-app-index', index)
+      option.tabIndex = 0
+      const iconHtml = app.icon
+        ? `<img class="option-icon" src="${escapeHtml(app.icon)}" alt="${escapeHtml(app.title || app.name || 'App')} icon">`
+        : '<div class="option-icon"><i class="fa-solid fa-folder"></i></div>'
+      const description = app.description ? `<div class="option-description">${escapeHtml(app.description)}</div>` : ''
+      const pathLabel = app.displayPath || app.cwd || ''
+      option.innerHTML = `
+        ${iconHtml}
+        <div class="option-body">
+          <div class="option-name">${escapeHtml(app.title || app.name || 'Project')}</div>
+          <div class="option-path">${escapeHtml(pathLabel)}</div>
+          ${description}
+        </div>
+      `
+      return option
+    }
+
+    function renderList(query) {
+      const term = (query || '').toLowerCase().trim()
+      dropdownEl.innerHTML = ''
+      state.visibleIndices = []
+      clearSelection()
+
+      const matches = []
+      for (let i = 0; i < state.apps.length; i++) {
+        const app = state.apps[i]
+        const searchable = [app.title, app.name, app.description, app.displayPath, app.cwd]
+          .filter(Boolean)
+          .join(' ')
+          .toLowerCase()
+        if (!term || searchable.includes(term)) {
+          matches.push({ app, index: i })
+        }
+      }
+
+      if (matches.length === 0) {
+        dropdownEl.innerHTML = '<div class="url-dropdown-empty">No projects found</div>'
+        return
+      }
+
+      const fragment = document.createDocumentFragment()
+      matches.forEach(({ app, index }) => {
+        const option = buildOption(app, index)
+        state.visibleIndices.push(index)
+        option.addEventListener('click', () => {
+          select(index, option, { autoLaunch: true })
+        })
+        option.addEventListener('keydown', (event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault()
+            select(index, option, { autoLaunch: true })
+          } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault()
+            navigate(event.key === 'ArrowDown' ? 1 : -1)
+          }
+        })
+        fragment.appendChild(option)
+      })
+      dropdownEl.appendChild(fragment)
+    }
+
+    function navigate(delta) {
+      if (state.visibleIndices.length === 0) return
+      const currentPos = state.visibleIndices.indexOf(state.selectedIndex)
+      let nextPos
+      if (currentPos === -1) {
+        nextPos = delta > 0 ? 0 : state.visibleIndices.length - 1
+      } else {
+        nextPos = currentPos + delta
+        if (nextPos < 0) nextPos = 0
+        if (nextPos >= state.visibleIndices.length) nextPos = state.visibleIndices.length - 1
+      }
+      const nextIndex = state.visibleIndices[nextPos]
+      const element = dropdownEl.querySelector(`[data-app-index="${nextIndex}"]`)
+      if (element) {
+        select(nextIndex, element, { autoLaunch: false })
+        element.focus()
+        ensureVisible(element)
+      }
+    }
+
+    function closeModal() {
+      overlay.classList.remove('is-visible')
+      document.removeEventListener('keydown', handleKeydown, true)
+      setTimeout(() => {
+        dropdownEl.innerHTML = ''
+        inputEl.value = ''
+        clearSelection()
+        dropdownEl.style.display = 'none'
+      }, 150)
+    }
+
+    function confirm() {
+      if (state.selectedIndex === -1) {
+        return
+      }
+      const plugin = state.plugin
+      const app = state.apps[state.selectedIndex]
+      if (!plugin || !plugin.pluginPath) {
+        closeModal()
+        alert('This plugin is missing a launch target.')
+        return
+      }
+      if (!app) {
+        closeModal()
+        alert('Select a project to continue.')
+        return
+      }
+      const queryPairs = []
+      const pushPair = (key, value, { rawValue = false } = {}) => {
+        if (value === undefined || value === null) {
+          return
+        }
+        const encodedKey = encodeURIComponent(key)
+        const encodedValue = rawValue ? String(value) : encodeURIComponent(String(value))
+        queryPairs.push(`${encodedKey}=${encodedValue}`)
+      }
+      pushPair('plugin', plugin.pluginPath, { rawValue: true })
+      if (Array.isArray(plugin.extraParams)) {
+        plugin.extraParams.forEach(([key, value]) => {
+          pushPair(key, value)
+        })
+      }
+      const queryString = queryPairs.join('&')
+      const target = queryPairs.length > 0 ? `/p/${app.name}/dev?${queryString}` : `/p/${app.name}/dev`
+      overlay.classList.remove('is-visible')
+      document.removeEventListener('keydown', handleKeydown, true)
+      location.href = target
+    }
+
+    function handleKeydown(event) {
+      if (!overlay.classList.contains('is-visible')) return
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        closeModal()
+      } else if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        navigate(1)
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        navigate(-1)
+      } else if (event.key === 'Enter' && document.activeElement === inputEl) {
+        event.preventDefault()
+        if (state.visibleIndices.length === 1 && state.selectedIndex === -1) {
+          const nextIndex = state.visibleIndices[0]
+          const element = dropdownEl.querySelector(`[data-app-index="${nextIndex}"]`)
+          select(nextIndex, element, { autoLaunch: true })
+        } else if (state.selectedIndex !== -1) {
+          confirm()
+        }
+      }
+    }
+
+    closeButton.addEventListener('click', (event) => {
+      event.preventDefault()
+      closeModal()
+    })
+    cancelButton.addEventListener('click', (event) => {
+      event.preventDefault()
+      closeModal()
+    })
+    overlay.addEventListener('click', (event) => {
+      if (event.target === overlay) {
+        closeModal()
+      }
+    })
+    inputEl.addEventListener('input', (event) => {
+      renderList(event.target.value)
+    })
+
+    function openModal(plugin) {
+      state.plugin = plugin
+      const title = plugin && plugin.title ? `Run ${plugin.title}` : 'Run Plugin'
+      titleEl.textContent = title
+      if (state.apps.length === 0) {
+        descriptionEl.textContent = 'No projects found under ~/pinokio/api. Create or download a project to continue.'
+      } else {
+        descriptionEl.textContent = 'Choose a project to open the terminal from.'
+      }
+      renderList('')
+      dropdownEl.style.display = 'block'
+      overlay.classList.add('is-visible')
+      document.addEventListener('keydown', handleKeydown, true)
+      requestAnimationFrame(() => {
+        inputEl.focus()
+        inputEl.select()
+      })
+    }
+
+    return {
+      open: openModal,
+      close: closeModal,
+      setApps(newApps) {
+        state.apps = Array.isArray(newApps) ? newApps : []
+      }
+    }
+  }
+
+  function initUrlFeatures() {
+    if (typeof initUrlDropdown === 'function') {
+      initUrlDropdown({ clearBehavior: 'empty' })
+    }
+  }
+
+  const modal = createPluginModal(apps)
+
+  function attachHandlers() {
+    const cards = document.querySelectorAll('.plugin-card')
+    if (!cards.length) return
+    cards.forEach((card) => {
+      const indexAttr = card.getAttribute('data-plugin-index')
+      const index = parseInt(indexAttr, 10)
+      if (Number.isNaN(index) || !plugins[index]) {
+        return
+      }
+      const plugin = plugins[index]
+      const infoButton = card.querySelector('.plugin-info')
+      if (infoButton) {
+        infoButton.addEventListener('click', (event) => {
+          event.preventDefault()
+          event.stopPropagation()
+          const link = infoButton.getAttribute('data-link')
+          if (link) {
+            window.open(link, '_blank', 'noopener,noreferrer')
+          }
+        })
+      }
+      const open = (event) => {
+        if (event) {
+          event.preventDefault()
+        }
+        if (!apps.length) {
+          alert('No projects found under ~/pinokio/api.')
+          return
+        }
+        modal.open(plugin)
+      }
+      card.addEventListener('click', open)
+      card.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          open(event)
+        }
+      })
+    })
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    initUrlFeatures()
+    attachHandlers()
+  })
+})()
+</script>
+<script src="/opener.js"></script>
+</body>
+</html>

package/server/views/tools.ejs

@@ -1269,6 +1269,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <a class='tab' id='genlog'><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
   <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
   <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
+  <a class='tab' href="/terminals"><i class="fa-solid fa-desktop"></i><div class='caption'>Terminals</div></a>
   <a class='tab selected' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
   <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
 </aside>