pinokiod 3.180.0 → 3.182.0

package/server/views/bootstrap.ejs

@@ -86,6 +86,7 @@ body {
 <script src="/xterm-theme.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/Socket.js"></script>
+<script src="/terminal-settings.js"></script>
 <script>
 function isASCII(str) {
   for (let i = 0; i < str.length; i++) {
@@ -145,7 +146,14 @@ document.addEventListener("DOMContentLoaded", () => {
       if (res && res.config) {
         config = res.config
       }
+      const baseConfig = Object.assign({}, config)
+      if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.applyToConfig === 'function') {
+        config = window.PinokioTerminalSettings.applyToConfig(config)
+      }
       const term = new Terminal(config)
+      if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.register === 'function') {
+        window.PinokioTerminalSettings.register(term, { baseConfig })
+      }
       const fitAddon = new FitAddon.FitAddon();
       term.loadAddon(fitAddon);
       term.loadAddon(new WebLinksAddon.WebLinksAddon());

package/server/views/connect.ejs

@@ -922,8 +922,17 @@ 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="/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>
 </body>

package/server/views/d.ejs

@@ -84,6 +84,7 @@ body.dark .tab:focus-visible {
   margin-left: 10px;
 }
 .tab i.img {
+  flex-shrink: 0;
   height: 40px;
   width: 40px;
   background: white;
@@ -92,10 +93,10 @@ body.dark .tab:focus-visible {
   justify-content: center;
   font-size: 20px;
   align-items: center;
-  border-radius: 5px;
+  border-radius: 40px;
 }
 .tab img {
-  border-radius: 5px;
+  border-radius: 40px;
   height: 40px;
   width: 40px;
   background: white;
@@ -161,6 +162,47 @@ body.dark .menu-container {
   flex-direction: column;
   box-sizing: border-box;
 }
+.column-subtitle {
+  font-size: 12px;
+  opacity: 0.7;
+  padding: 8px 10px 0;
+}
+body.dark .column-subtitle {
+  color: rgba(255, 255, 255, 0.75);
+}
+.menu-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+.menu-column {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+body.dark .menu-column {
+  border-color: rgba(255, 255, 255, 0.08);
+}
+.menu-column .tab-header {
+  background: rgba(0, 0, 0, 0.03);
+}
+body.dark .menu-column .tab-header {
+  background: rgba(255, 255, 255, 0.06);
+}
+.menu-column .tab-content {
+  padding-top: 4px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: 4px;
+}
+.menu-column .tab-content .tab {
+  flex: 0 0 auto;
+}
+@media (max-width: 700px) {
+  .menu-grid {
+    grid-template-columns: 1fr;
+  }
+}
 body.dark .tab-header {
   background: rgba(255,255,255,0.04);
 }
@@ -367,28 +409,140 @@ body.dark #update-spec {
   </div>
 </div>
 
-  <% index = 0 %>
-  <% dynamic.forEach((item) => { %>
+  <%
+    let index = 0;
+    const userTerminal = dynamic && dynamic.length ? dynamic[0] : null;
+    const cliMenu = dynamic.find((item) => item && item.title === "Terminal Agents");
+    const ideMenu = dynamic.find((item) => item && item.title === "IDE Agents");
+    const handled = new Set();
+    if (userTerminal) handled.add(userTerminal);
+    if (cliMenu) handled.add(cliMenu);
+    if (ideMenu) handled.add(ideMenu);
+    const remaining = dynamic.filter((item) => !handled.has(item));
+  %>
+
+  <div class='menu-grid'>
+    <% if (userTerminal && userTerminal.menu && userTerminal.menu.length) { %>
+      <div class='menu-container menu-column user-terminal'>
+        <div class='tab-header'>
+          <h3><i class='<%= userTerminal.icon %>'></i> <%= userTerminal.title %></h3>
+        </div>
+        <% if (userTerminal.subtitle) { %>
+          <div class='column-subtitle'><%= userTerminal.subtitle %></div>
+        <% } %>
+        <div class='tab-content'>
+          <% userTerminal.menu.forEach((i) => { %>
+            <div class='tab' role="button" tabindex="0" data-index="<%= index++ %>" data-target="@<%= i.href %>" data-href="<%= i.href %>">
+              <% if (i.image) { %>
+                <img src="<%= i.image %>">
+              <% } else if (i.icon) { %>
+                <i class="img <%= i.icon %>"></i>
+              <% } %>
+              <h2><%= i.title %></h2>
+              <% if (i.subtitle) { %>
+                <div class='subtitle'><%= i.subtitle %></div>
+              <% } %>
+              <div class='flexible'></div>
+              <% if (i.link) { %>
+                <div target="_blank" data-href="<%= i.link %>"><i class="fa-solid fa-circle-info"></i></div>
+              <% } %>
+              <div class='disclosure-indicator' aria-hidden="true">
+                <i class="fa-solid fa-chevron-right"></i>
+              </div>
+            </div>
+          <% }) %>
+        </div>
+      </div>
+    <% } %>
+
+    <% if (cliMenu && cliMenu.menu && cliMenu.menu.length) { %>
+      <div class='menu-container menu-column cli-column'>
+        <div class='tab-header'>
+          <h3><i class='<%= cliMenu.icon %>'></i> Terminal Agents</h3>
+        </div>
+        <% if (cliMenu.subtitle) { %>
+          <div class='column-subtitle'><%= cliMenu.subtitle %></div>
+        <% } %>
+        <div class='tab-content'>
+          <% cliMenu.menu.forEach((i) => { %>
+            <div class='tab' role="button" tabindex="0" data-index="<%= index++ %>" data-target="@<%= i.href %>" data-href="<%= i.href %>">
+              <% if (i.image) { %>
+                <img src="<%= i.image %>">
+              <% } else if (i.icon) { %>
+                <i class="img <%= i.icon %>"></i>
+              <% } %>
+              <h2><%= i.title %></h2>
+              <% if (i.subtitle) { %>
+                <div class='subtitle'><%= i.subtitle %></div>
+              <% } %>
+              <div class='flexible'></div>
+              <% if (i.link) { %>
+                <div target="_blank" data-href="<%= i.link %>"><i class="fa-solid fa-circle-info"></i></div>
+              <% } %>
+              <div class='disclosure-indicator' aria-hidden="true">
+                <i class="fa-solid fa-chevron-right"></i>
+              </div>
+            </div>
+          <% }) %>
+        </div>
+      </div>
+    <% } %>
+
+    <% if (ideMenu && ideMenu.menu && ideMenu.menu.length) { %>
+      <div class='menu-container menu-column ide-column'>
+        <div class='tab-header'>
+          <h3><i class='<%= ideMenu.icon %>'></i> IDE Agents</h3>
+        </div>
+        <% if (ideMenu.subtitle) { %>
+          <div class='column-subtitle'><%= ideMenu.subtitle %></div>
+        <% } %>
+        <div class='tab-content'>
+          <% ideMenu.menu.forEach((i) => { %>
+            <div class='tab' role="button" tabindex="0" data-index="<%= index++ %>" data-target="@<%= i.href %>" data-href="<%= i.href %>">
+              <% if (i.image) { %>
+                <img src="<%= i.image %>">
+              <% } else if (i.icon) { %>
+                <i class="img <%= i.icon %>"></i>
+              <% } %>
+              <h2><%= i.title %></h2>
+              <% if (i.subtitle) { %>
+                <div class='subtitle'><%= i.subtitle %></div>
+              <% } %>
+              <div class='flexible'></div>
+              <% if (i.link) { %>
+                <div target="_blank" data-href="<%= i.link %>"><i class="fa-solid fa-circle-info"></i></div>
+              <% } %>
+              <div class='disclosure-indicator' aria-hidden="true">
+                <i class="fa-solid fa-chevron-right"></i>
+              </div>
+            </div>
+          <% }) %>
+        </div>
+      </div>
+    <% } %>
+  </div>
+
+  <% remaining.forEach((item) => { %>
     <% if (item.menu) { %>
       <div class='menu-container'>
         <div class='tab-header'>
-          <h3><i class='<%=item.icon%>'></i> <%=item.title%></h3>
+          <h3><i class='<%= item.icon %>'></i> <%= item.title %></h3>
         </div>
         <div class='tab-content'>
           <% item.menu.forEach((i) => { %>
-            <div class='tab' role="button" tabindex="0" data-index="<%=index++%>" data-target="@<%=i.href%>" data-href="<%=i.href%>">
+            <div class='tab' role="button" tabindex="0" data-index="<%= index++ %>" data-target="@<%= i.href %>" data-href="<%= i.href %>">
               <% if (i.image) { %>
-                <img src="<%=i.image%>">
+                <img src="<%= i.image %>">
               <% } else if (i.icon) { %>
-                <i class="img <%=i.icon%>"></i>
+                <i class="img <%= i.icon %>"></i>
               <% } %>
-              <h2><%=i.title%></h1>
+              <h2><%= i.title %></h2>
               <% if (i.subtitle) { %>
-                <div class='subtitle'><%=i.subtitle%></div>
+                <div class='subtitle'><%= i.subtitle %></div>
               <% } %>
               <div class='flexible'></div>
               <% if (i.link) { %>
-              <div target="_blank" data-href="<%=i.link%>"><i class="fa-solid fa-circle-info"></i></div>
+                <div target="_blank" data-href="<%= i.link %>"><i class="fa-solid fa-circle-info"></i></div>
               <% } %>
               <div class='disclosure-indicator' aria-hidden="true">
                 <i class="fa-solid fa-chevron-right"></i>
@@ -398,22 +552,22 @@ body.dark #update-spec {
         </div>
       </div>
     <% } else { %>
-      <div class='tab' data-index="<%=index++%>">
+      <div class='tab' data-index="<%= index++ %>">
         <% if (item.image) { %>
-          <img src="<%=item.image%>">
+          <img src="<%= item.image %>">
         <% } else if (item.icon) { %>
-          <i class="img <%=item.icon%>"></i>
+          <i class="img <%= item.icon %>"></i>
         <% } %>
         <div class='col'>
-          <h2><%=item.title%></h1>
+          <h2><%= item.title %></h2>
           <% if (item.subtitle) { %>
-            <div class='subtitle'><%=item.subtitle%></div>
+            <div class='subtitle'><%= item.subtitle %></div>
           <% } %>
           <div class='btns'>
             <% if (item.link) { %>
-            <a class='btn' target="_blank" href="<%=item.link%>"><i class="fa-solid fa-circle-info"></i></a>
+              <a class='btn' target="_blank" href="<%= item.link %>"><i class="fa-solid fa-circle-info"></i></a>
             <% } %>
-            <a class='run-btn btn' href="<%=item.href%>"><i class="fa-solid <%=item.type === "Start" ? 'fa-play' : 'fa-rocket'%>"></i> <%=item.type%></a>
+            <a class='run-btn btn' href="<%= item.href %>"><i class="fa-solid <%= item.type === "Start" ? 'fa-play' : 'fa-rocket' %>"></i> <%= item.type %></a>
           </div>
         </div>
       </div>

package/server/views/editor.ejs

@@ -13,6 +13,7 @@
 <script src="/xterm-addon-search-bar.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/Socket.js"></script>
+<script src="/terminal-settings.js"></script>
 <script src="/common.js"></script>
 <script src="/he.js"></script>
 <script src="/opener.js"></script>
@@ -680,7 +681,14 @@ document.addEventListener("DOMContentLoaded", async () => {
         if (res && res.config) {
           config = res.config
         }
+        const baseConfig = Object.assign({}, config)
+        if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.applyToConfig === 'function') {
+          config = window.PinokioTerminalSettings.applyToConfig(config)
+        }
         const term = new Terminal(config)
+        if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.register === 'function') {
+          window.PinokioTerminalSettings.register(term, { baseConfig })
+        }
         term.open(document.querySelector("#terminal"))
 
 

package/server/views/file_browser.ejs

@@ -52,6 +52,10 @@
         </div>
       </aside>
       <main class="files-app__main">
+        <button class="files-app__sidebar-toggle" id="files-app-toggle-sidebar" type="button" aria-controls="files-app-tree" aria-expanded="true">
+          <span class="sr-only">Hide files</span>
+          <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
+        </button>
         <div class="files-app__tabs" id="files-app-tabs" role="tablist" aria-label="Open files"></div>
         <div class="files-app__editor" id="files-app-editor" role="presentation"></div>
         <div class="files-app__status" id="files-app-status" role="status" aria-live="polite"></div>

package/server/views/index.ejs

@@ -729,8 +729,17 @@ 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="/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>

package/server/views/init/index.ejs

@@ -1497,6 +1497,7 @@ body.dark .ace-editor {
 <script src="/report.js"></script>
 <script src="/normalize.js"></script>
 <script src="/Socket.js"></script>
+<script src="/terminal-settings.js"></script>
 <script src="/noty.js"></script>
 <script src="/notyq.js"></script>
 <script src="/xterm.js"></script>
@@ -1587,7 +1588,6 @@ body.dark .ace-editor {
               <div><h5>Download</h5></div>
             </div>
           </button>
-          <!--
           <div class='category-label'>Create a web domain</div>
           <button type="button" class="tab-button" data-tab="dns">
             <div class='row'>
@@ -1595,7 +1595,6 @@ body.dark .ace-editor {
               <div><h5>Web Domain</h5></div>
             </div>
           </button>
-          -->
         </div>
 
         <form id="bootstrap-form">
@@ -1951,8 +1950,17 @@ 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="/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>
 <div id='terminal-container' class='hidden'>
@@ -2649,7 +2657,14 @@ const createTerm = async (_theme) => {
   if (res && res.config) {
     config = res.config
   }
+  const baseConfig = Object.assign({}, config)
+  if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.applyToConfig === 'function') {
+    config = window.PinokioTerminalSettings.applyToConfig(config)
+  }
   const term = new Terminal(config)
+  if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.register === 'function') {
+    window.PinokioTerminalSettings.register(term, { baseConfig })
+  }
   term.open(document.querySelector("#terminal2"))
   document.querySelector("#terminal-container").classList.remove("hidden")
 

package/server/views/install.ejs

@@ -124,6 +124,7 @@ body {
 <script src="/xterm-addon-web-links.js"></script>
 <script src="/xterm-theme.js"></script>
 <script src="/Socket.js"></script>
+<script src="/terminal-settings.js"></script>
 <!--
 <script src="/install.js"></script>
 -->
@@ -169,7 +170,14 @@ const createTerm = async (_theme) => {
   if (res && res.config) {
     config = res.config
   }
+  const baseConfig = Object.assign({}, config)
+  if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.applyToConfig === 'function') {
+    config = window.PinokioTerminalSettings.applyToConfig(config)
+  }
   const term = new Terminal(config)
+  if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.register === 'function') {
+    window.PinokioTerminalSettings.register(term, { baseConfig })
+  }
   term.open(document.querySelector("#terminal"))
 
   term.attachCustomKeyEventHandler(event => {

package/server/views/layout.ejs

@@ -125,6 +125,8 @@
       sessionId: sessionId || null
     }) %>
   </script>
+  <script src="/Socket.js"></script>
+  <script src="/common.js"></script>
   <script src="/layout.js"></script>
 </body>
 </html>

package/server/views/net.ejs

@@ -821,8 +821,17 @@ 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="/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>

package/server/views/network.ejs

@@ -1182,8 +1182,17 @@ 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="/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>

package/server/views/pro.ejs

@@ -13,6 +13,7 @@
 <script src="/xterm-addon-search-bar.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/Socket.js"></script>
+<script src="/terminal-settings.js"></script>
 <script src="/common.js"></script>
 <script src="/he.js"></script>
 <script src="/opener.js"></script>
@@ -228,7 +229,14 @@ const createTerm = async (_theme) => {
   if (res && res.config) {
     config = res.config
   }
+  const baseConfig = Object.assign({}, config)
+  if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.applyToConfig === 'function') {
+    config = window.PinokioTerminalSettings.applyToConfig(config)
+  }
   const term = new Terminal(config)
+  if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.register === 'function') {
+    window.PinokioTerminalSettings.register(term, { baseConfig })
+  }
   term.open(document.querySelector("#terminal"))
 
   term.attachCustomKeyEventHandler(event => {

package/server/views/prototype/index.ejs

@@ -981,6 +981,7 @@ body.dark .appcanvas {
 <script src="/report.js"></script>
 <script src="/normalize.js"></script>
 <script src="/Socket.js"></script>
+<script src="/terminal-settings.js"></script>
 <script src="/noty.js"></script>
 <script src="/notyq.js"></script>
 <script src="/xterm.js"></script>
@@ -1570,7 +1571,14 @@ async function displayResults(config) {
     term_config = res.config
   }
   let socket = new Socket()
+  const baseConfig = Object.assign({}, term_config)
+  if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.applyToConfig === 'function') {
+    term_config = window.PinokioTerminalSettings.applyToConfig(term_config)
+  }
   const term = new Terminal(term_config)
+  if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.register === 'function') {
+    window.PinokioTerminalSettings.register(term, { baseConfig })
+  }
   term.open(document.querySelector("#terminal"))
   term.attachCustomKeyEventHandler(event => {
     console.log({ event })

package/server/views/screenshots.ejs

@@ -198,7 +198,6 @@ body.dark header .home {
 */
 header .home {
   color: var(--light-color); 
-  padding: 10px;
 }
 body.dark hr {
   background: white;
@@ -774,8 +773,17 @@ 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="/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>

package/server/views/settings.ejs

@@ -198,7 +198,6 @@ body.dark header .home {
 */
 header .home {
   color: var(--light-color); 
-  padding: 10px;
 }
 body.dark hr {
   background: white;
@@ -569,8 +568,17 @@ 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="/agents"><i class="fa-solid fa-robot"></i><div class='caption'>Agents</div></a>
   <a class='tab selected' 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>

package/server/views/shell.ejs

@@ -14,6 +14,7 @@
 <script src="/sweetalert2.js"></script>
 <script src="/Socket.js"></script>
 <script src="/terminal_input_tracker.js"></script>
+<script src="/terminal-settings.js"></script>
 <script src="/common.js"></script>
 <script src="/he.js"></script>
 <script src="/opener.js"></script>
@@ -927,7 +928,14 @@ document.addEventListener("DOMContentLoaded", async () => {
         if (res && res.config) {
           config = res.config
         }
+        const baseConfig = Object.assign({}, config)
+        if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.applyToConfig === 'function') {
+          config = window.PinokioTerminalSettings.applyToConfig(config)
+        }
         const term = new Terminal(config)
+        if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.register === 'function') {
+          window.PinokioTerminalSettings.register(term, { baseConfig })
+        }
         term.open(document.querySelector("#terminal"))
         const terminalContainer = document.querySelector("#terminal")
         const dropOverlay = document.createElement("div")

package/server/views/terminal.ejs

@@ -14,6 +14,7 @@
 <script src="/sweetalert2.js"></script>
 <script src="/Socket.js"></script>
 <script src="/terminal_input_tracker.js"></script>
+<script src="/terminal-settings.js"></script>
 <script src="/common.js"></script>
 <script src="/he.js"></script>
 <script src="/opener.js"></script>
@@ -1011,7 +1012,14 @@ document.addEventListener("DOMContentLoaded", async () => {
         if (res && res.config) {
           config = res.config
         }
+        const baseConfig = Object.assign({}, config)
+        if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.applyToConfig === 'function') {
+          config = window.PinokioTerminalSettings.applyToConfig(config)
+        }
         const term = new Terminal(config)
+        if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.register === 'function') {
+          window.PinokioTerminalSettings.register(term, { baseConfig })
+        }
         term.open(document.querySelector("#terminal"))
         const terminalContainer = document.querySelector("#terminal")
         const dropOverlay = document.createElement("div")