pinokiod 3.180.0 → 3.182.0

package/server/public/urldropdown.css

@@ -415,9 +415,30 @@ body.dark .create-launcher-modal-tools-title {
   color: rgba(203, 213, 225, 0.7);
 }
 .create-launcher-modal-tools-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  align-items: flex-start;
+}
+.create-launcher-modal-tools-group {
   display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.create-launcher-modal-tools-group-title {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(71, 85, 105, 0.75);
+}
+body.dark .create-launcher-modal-tools-group-title {
+  color: rgba(203, 213, 225, 0.65);
+}
+.create-launcher-modal-tools-group-options {
+  display: flex;
+  flex-direction: column;
   gap: 10px;
-  flex-wrap: wrap;
 }
 .create-launcher-modal-tool {
   position: relative;
@@ -462,6 +483,12 @@ body.dark .create-launcher-modal-tool.selected {
   background: rgba(127, 91, 243, 0.28);
   box-shadow: 0 14px 40px rgba(5, 9, 25, 0.55);
 }
+
+@media (max-width: 720px) {
+  .create-launcher-modal-tools-options {
+    grid-template-columns: 1fr;
+  }
+}
 .create-launcher-modal-tool input[type="radio"] {
   position: absolute;
   opacity: 0;

package/server/socket.js

@@ -1,6 +1,7 @@
 const querystring = require("querystring");
 const WebSocket = require('ws');
 const path = require('path')
+const os = require('os')
 const Util = require("../kernel/util")
 const Environment = require("../kernel/environment")
 const NOTIFICATION_CHANNEL = 'kernel.notifications'
@@ -15,6 +16,20 @@ class Socket {
     this.server = parent.server
 //    this.kernel = parent.kernel
     const wss = new WebSocket.Server({ server: this.parent.server })
+    this.localDeviceIds = new Set()
+    this.localAddresses = new Set()
+    try {
+      const ifaces = os.networkInterfaces() || {}
+      Object.values(ifaces).forEach((arr) => {
+        (arr || []).forEach((info) => {
+          if (info && info.address) {
+            this.localAddresses.add(info.address)
+          }
+        })
+      })
+      this.localAddresses.add('127.0.0.1')
+      this.localAddresses.add('::1')
+    } catch (_) {}
     this.subscriptions = new Map(); // Initialize a Map to store the WebSocket connections interested in each event
     this.notificationChannel = NOTIFICATION_CHANNEL
     this.notificationBridgeDispose = null
@@ -36,6 +51,12 @@ class Socket {
             this.subscriptions.delete(eventName);
           }
         });
+        // Cleanup device tracking
+        try {
+          if (ws._isLocalClient && ws._deviceId) {
+            this.localDeviceIds.delete(ws._deviceId)
+          }
+        } catch (_) {}
         this.checkNotificationBridge();
       });
       ws.on('message', async (message, isBinary) => {
@@ -171,6 +192,25 @@ class Socket {
                 this.parent.kernel.api.process(req)
               }
             } else {
+              if (req.method === this.notificationChannel) {
+                if (typeof req.device_id === 'string' && req.device_id.trim()) {
+                  ws._deviceId = req.device_id.trim()
+                }
+                // Mark local client sockets by IP matching any local address
+                try {
+                  const ip = ws._ip || ''
+                  const isLocal = (addr) => {
+                    if (!addr || typeof addr !== 'string') return false
+                    if (this.localAddresses.has(addr)) return true
+                    const v = addr.trim().toLowerCase()
+                    return v.startsWith('::ffff:127.') || v.startsWith('127.')
+                  }
+                  ws._isLocalClient = isLocal(ip)
+                  if (ws._isLocalClient && ws._deviceId) {
+                    this.localDeviceIds.add(ws._deviceId)
+                  }
+                } catch (_) {}
+              }
               this.subscribe(ws, req.method)
               if (req.mode !== "listen") {
                 this.parent.kernel.api.process(req)
@@ -350,11 +390,38 @@ class Socket {
       data: payload,
     }
     const frame = JSON.stringify(envelope)
-    subscribers.forEach((subscriber) => {
-      if (subscriber.readyState === WebSocket.OPEN) {
-        subscriber.send(frame)
+    const targetId = (payload && typeof payload.device_id === 'string' && payload.device_id.trim()) ? payload.device_id.trim() : null
+    const audience = (payload && typeof payload.audience === 'string' && payload.audience.trim()) ? payload.audience.trim() : null
+    if (audience === 'device' && targetId) {
+      let delivered = false
+      subscribers.forEach((subscriber) => {
+        if (subscriber.readyState !== WebSocket.OPEN) {
+          return
+        }
+        if (subscriber._deviceId && subscriber._deviceId === targetId) {
+          try { subscriber.send(frame); delivered = true } catch (_) {}
+        }
+      })
+      if (!delivered) {
+        // Fallback: broadcast if no matching device subscriber is available
+        subscribers.forEach((subscriber) => {
+          if (subscriber.readyState === WebSocket.OPEN) {
+            try { subscriber.send(frame) } catch (_) {}
+          }
+        })
       }
-    })
+    } else {
+      subscribers.forEach((subscriber) => {
+        if (subscriber.readyState === WebSocket.OPEN) {
+          try { subscriber.send(frame) } catch (_) {}
+        }
+      })
+    }
+  }
+
+  isLocalDevice(deviceId) {
+    if (!deviceId || typeof deviceId !== 'string') return false
+    return this.localDeviceIds.has(deviceId)
   }
 
   ensureNotificationBridge() {

package/server/views/{terminals.ejs → agents.ejs}

@@ -1,6 +1,6 @@
 <html>
 <head>
-<title>Pinokio Terminals</title>
+<title>Pinokio Agents</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" />
@@ -53,7 +53,6 @@ body.plugin-page .btn-tab {
   display: flex;
   align-items: center;
   gap: 10px;
-  margin-bottom: 15px;
 }
 body.plugin-page .btn-tab .btn {
   display: flex;
@@ -76,6 +75,32 @@ body.plugin-page .btn-tab .btn {
   grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
   gap: 14px;
 }
+.plugin-category-layout {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 24px;
+}
+.plugin-category {
+  display: flex;
+  flex-direction: column;
+}
+.plugin-category-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 12px;
+}
+.plugin-category-title {
+  font-size: 30px;
+  font-weight: 700;
+  margin: 0;
+}
+.plugin-category-subtitle {
+  font-size: 12px;
+  opacity: 0.6;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
 .plugin-card {
   display: flex;
   align-items: center;
@@ -195,6 +220,9 @@ body.dark .plugin-card:focus-visible .disclosure-indicator {
   background: rgba(0, 0, 0, 0.02);
   text-align: center;
 }
+.plugin-empty.plugin-empty-category {
+  padding: 20px;
+}
 body.dark .plugin-empty {
   border-color: rgba(255, 255, 255, 0.16);
   background: rgba(255, 255, 255, 0.04);
@@ -305,6 +333,11 @@ body.dark .plugin-option:hover {
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   }
 }
+@media (max-width: 900px) {
+  .plugin-category-layout {
+    grid-template-columns: 1fr;
+  }
+}
 @media (max-width: 600px) {
   body.plugin-page main {
     flex-direction: column;
@@ -394,37 +427,71 @@ body.dark .plugin-option:hover {
 </header>
 <main class='plugin-main'>
   <div class='plugin-container'>
-    <h1><i class="fa-solid fa-desktop"></i>Terminals</h1>
+    <h1><i class="fa-solid fa-robot"></i>Agents</h1>
+    <% const pluginCategories = pluginMenu.reduce((acc, pluginItem, index) => {
+         const runs = Array.isArray(pluginItem.run) ? pluginItem.run : []
+         const hasExec = runs.some((step) => step && step.method === 'exec')
+         const hasShellRun = runs.some((step) => step && step.method === 'shell.run')
+         if (hasExec) {
+           acc.ide.push({ pluginItem, index })
+         } else if (hasShellRun) {
+           acc.cli.push({ pluginItem, index })
+         } else {
+           acc.cli.push({ pluginItem, index })
+         }
+         return acc
+       }, { ide: [], cli: [] }) %>
     <% 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>
+        <p>No agents found. Clone or add agent 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 Agents</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 class='plugin-category-layout'>
+        <% [
+             { key: 'ide', title: 'IDE', subtitle: 'Launch externally' },
+             { key: 'cli', title: 'CLI', subtitle: 'Launch in Pinokio' }
+           ].forEach(({ key, title, subtitle }) => {
+             const items = pluginCategories[key] || []
+        %>
+          <section class='plugin-category' aria-label="<%=title%> agents">
+            <div class='plugin-category-header'>
+              <h2 class='plugin-category-title'><%=title%></h2>
+              <div class='plugin-category-subtitle'><%=subtitle%></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>
+            <% if (items.length) { %>
+              <div class='plugin-grid'>
+                <% items.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-robot"></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>
+            <% } else { %>
+              <div class='plugin-empty plugin-empty-category'>
+                <p>No <%=title%> agents available.</p>
+              </div>
             <% } %>
-            <div class='disclosure-indicator' aria-hidden="true">
-              <i class="fa-solid fa-chevron-right"></i>
-            </div>
-          </div>
+          </section>
         <% }) %>
       </div>
     <% } %>
@@ -447,9 +514,18 @@ body.dark .plugin-option:hover {
     <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>
+  <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
+  <a class='tab selected' href="/agents"><i class="fa-solid fa-robot"></i><div class='caption'>Agents</div></a>
+  <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
+  <% if (typeof peer_qr !== 'undefined' && peer_qr) { %>
+  <div class='qr' style='padding:12px 10px; text-align:center;'>
+    <a href="<%=peer_url%>" target="_blank" style="text-decoration:none; color:inherit; display:block;">
+      <img src="<%=peer_qr%>" alt="Open <%=peer_url%>" style="width:128px; height:128px; image-rendering: pixelated;"/>
+      <div class='caption'>Scan to open</div>
+      <div class='caption' style='font-size:10px; opacity:0.7;'><%=peer_url%></div>
+    </a>
+  </div>
+  <% } %>
   </aside>
 </main>
 <script type="application/json" id="plugin-data"><%- JSON.stringify(serializedPlugins) %></script>
@@ -495,7 +571,7 @@ body.dark .plugin-option:hover {
       <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>
+        <p class="url-modal-description" id="plugin-modal-description">Choose a project to open the agent 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">
@@ -730,7 +806,7 @@ body.dark .plugin-option:hover {
       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.'
+        descriptionEl.textContent = 'Choose a project to open the agent from.'
       }
       renderList('')
       dropdownEl.style.display = 'block'