pinokiod 3.180.0 → 3.182.0

package/server/public/files-app/app.css

@@ -167,6 +167,70 @@
   display: flex;
   flex-direction: column;
   background: var(--surface-color);
+  position: relative;
+  overflow: visible;
+}
+
+.files-app__sidebar-toggle {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 36px;
+  border: 1px solid var(--border-color);
+  border-left: none;
+  border-radius: 0 8px 8px 0;
+  background: var(--surface-color);
+  color: var(--muted-color);
+  cursor: pointer;
+  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
+  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
+  z-index: 10;
+}
+
+.files-app__sidebar-toggle:hover,
+.files-app__sidebar-toggle:focus-visible {
+  background: rgba(127, 91, 243, 0.14);
+  color: var(--accent-color);
+}
+
+.files-app__sidebar-toggle--collapsed {
+  top: 36px;
+  left: 8px;
+  transform: translateX(0);
+  border-left: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: rgba(127, 91, 243, 0.12);
+  color: var(--accent-color);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
+}
+
+.files-app__sidebar-toggle--collapsed:hover,
+.files-app__sidebar-toggle--collapsed:focus-visible {
+  background: rgba(127, 91, 243, 0.18);
+}
+
+.files-app__sidebar-toggle:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+}
+
+.files-app--sidebar-collapsed .files-app__sidebar {
+  flex: 0 0 0;
+  width: 0;
+  min-width: 0;
+  max-width: 0;
+  opacity: 0;
+  pointer-events: none;
+  border-right: none;
+}
+
+.files-app--sidebar-collapsed .files-app__sidebar-scroll {
+  padding: 0;
 }
 
 .files-app__tabs:empty {

package/server/public/files-app/app.js

@@ -28,6 +28,8 @@
     }
   };
 
+  const SIDEBAR_STORAGE_PREFIX = 'files-app.sidebar-collapsed.';
+
   const FilesApp = {
     init(config) {
       if (this._initialized) {
@@ -48,14 +50,19 @@
         activePath: null,
         selectedTreePath: null,
         statusTimer: null,
+        sidebarCollapsed: false,
       };
 
       this.dom = {
+        root: document.querySelector('.files-app'),
         treeRoot: document.getElementById('files-app-tree'),
         tabs: document.getElementById('files-app-tabs'),
         editorContainer: document.getElementById('files-app-editor'),
         status: document.getElementById('files-app-status'),
         saveBtn: document.getElementById('files-app-save'),
+        sidebar: document.querySelector('.files-app__sidebar'),
+        main: document.querySelector('.files-app__main'),
+        sidebarToggle: document.getElementById('files-app-toggle-sidebar'),
       };
 
       this.api = createApi(config.workspace, this.state.workspaceRoot);
@@ -63,6 +70,8 @@
       this.modelist = ace.require('ace/ext/modelist');
       this.undoManagerCtor = ace.require('ace/undomanager').UndoManager;
 
+      setupSidebarToggle.call(this);
+
       this.dom.saveBtn.addEventListener('click', (event) => {
         event.preventDefault();
         this.saveActiveFile();
@@ -227,6 +236,84 @@
     },
   };
 
+  function setupSidebarToggle() {
+    if (!this.dom.sidebarToggle || !this.dom.root) {
+      return;
+    }
+
+    const storageKey = getSidebarStorageKey(this.state.workspace);
+    const initialCollapsed = readSidebarPreference(storageKey);
+    applySidebarCollapsed.call(this, initialCollapsed);
+
+    this.dom.sidebarToggle.addEventListener('click', () => {
+      const nextState = !this.state.sidebarCollapsed;
+      applySidebarCollapsed.call(this, nextState);
+      persistSidebarPreference(storageKey, nextState);
+    });
+
+    window.addEventListener('storage', (event) => {
+      if (event.key === storageKey) {
+        const newValue = event.newValue === '1';
+        if (newValue !== this.state.sidebarCollapsed) {
+          applySidebarCollapsed.call(this, newValue);
+        }
+      }
+    });
+  }
+
+  function readSidebarPreference(storageKey) {
+    try {
+      const storedValue = window.localStorage.getItem(storageKey);
+      return storedValue === '1';
+    } catch (error) {
+      return false;
+    }
+  }
+
+  function persistSidebarPreference(storageKey, collapsed) {
+    try {
+      window.localStorage.setItem(storageKey, collapsed ? '1' : '0');
+    } catch (error) {
+      /* ignore */
+    }
+  }
+
+  function applySidebarCollapsed(collapsed) {
+    this.state.sidebarCollapsed = collapsed;
+    if (this.dom.root) {
+      this.dom.root.classList.toggle('files-app--sidebar-collapsed', collapsed);
+    }
+    if (this.dom.sidebar) {
+      if (collapsed) {
+        this.dom.sidebar.setAttribute('aria-hidden', 'true');
+      } else {
+        this.dom.sidebar.removeAttribute('aria-hidden');
+      }
+    }
+    if (!this.dom.sidebarToggle) {
+      return;
+    }
+    this.dom.sidebarToggle.setAttribute('aria-expanded', String(!collapsed));
+    const label = collapsed ? 'Show files' : 'Hide files';
+    this.dom.sidebarToggle.setAttribute('aria-label', label);
+    this.dom.sidebarToggle.title = label;
+    const srText = this.dom.sidebarToggle.querySelector('.sr-only');
+    if (srText) {
+      srText.textContent = label;
+    }
+    this.dom.sidebarToggle.classList.toggle('files-app__sidebar-toggle--collapsed', collapsed);
+    const icon = this.dom.sidebarToggle.querySelector('i');
+    if (icon) {
+      icon.classList.toggle('fa-chevron-left', !collapsed);
+      icon.classList.toggle('fa-chevron-right', collapsed);
+    }
+  }
+
+  function getSidebarStorageKey(workspace) {
+    const scope = workspace ? String(workspace) : 'default';
+    return `${SIDEBAR_STORAGE_PREFIX}${scope}`;
+  }
+
   function createApi(workspace, workspaceRoot) {
     const list = async (pathPosix) => {
       const params = new URLSearchParams({ workspace });

package/server/public/install.js

@@ -146,7 +146,7 @@ const install = async (name, url, term, socket, options) => {
         text: `Downloaded to ~/${normalizedPath}/${name}`,
         timeout: 4000
       })
-      location.href = "/terminals"
+      location.href = "/agents"
     }
   }
 }
@@ -166,7 +166,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 })
+  }
   const fitAddon = new FitAddon.FitAddon();
   term.loadAddon(fitAddon);
   term.loadAddon(new WebLinksAddon.WebLinksAddon());

package/server/public/layout.js

@@ -790,4 +790,128 @@
   };
 
   window.PinokioLayout = api;
+  // Mobile "Tap to connect" curtain is centralized in common.js to avoid duplicates
+  
+  // Top-level notification listener (indicator + optional chime) for mobile
+  (function initTopLevelNotificationListener() {
+    try { if (window.top && window.top !== window) return; } catch (_) { return; }
+    if (window.__pinokioTopNotifyListener) {
+      return;
+    }
+    window.__pinokioTopNotifyListener = true;
+
+    const ensureIndicator = (() => {
+      let el = null;
+      let styleInjected = false;
+      return () => {
+        if (!styleInjected) {
+          const style = document.createElement('style');
+          style.textContent = `
+.pinokio-notify-indicator{position:fixed;top:12px;right:12px;z-index:2147483647;display:none;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(15,23,42,0.92);color:#fff;font:600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,0.35)}
+.pinokio-notify-indicator .bell{font-size:14px}
+.pinokio-notify-indicator.show{display:inline-flex;animation:pinokioNotifyPop 160ms ease-out, pinokioNotifyFade 1600ms ease-in 700ms forwards}
+@keyframes pinokioNotifyPop{from{transform:translateY(-6px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
+@keyframes pinokioNotifyFade{to{opacity:0;transform:translateY(-4px)}}
+@media (max-width: 768px){.pinokio-notify-indicator{top:10px;right:10px;padding:7px 9px;font-size:12px}}
+          `;
+          document.head.appendChild(style);
+          styleInjected = true;
+        }
+        if (!el) {
+          el = document.createElement('div');
+          el.className = 'pinokio-notify-indicator';
+          const icon = document.createElement('span');
+          icon.className = 'bell';
+          icon.textContent = '🔔';
+          const text = document.createElement('span');
+          text.className = 'text';
+          text.textContent = 'Notification received';
+          el.appendChild(icon);
+          el.appendChild(text);
+          document.body.appendChild(el);
+        }
+        return el;
+      };
+    })();
+
+    const flashIndicator = (message) => {
+      const node = ensureIndicator();
+      const text = node.querySelector('.text');
+      if (text) {
+        const msg = (message && typeof message === 'string' && message.trim()) ? message.trim() : 'Notification received';
+        text.textContent = msg.length > 80 ? (msg.slice(0,77) + '…') : msg;
+      }
+      node.classList.remove('show');
+      void node.offsetWidth;
+      node.classList.add('show');
+      setTimeout(() => node.classList.remove('show'), 2400);
+    };
+
+    const isFalseyString = (value) => {
+      return typeof value === 'string' && ['false', '0', 'no', 'off'].includes(value.trim().toLowerCase());
+    };
+
+    const tryPlay = (url) => {
+      if (!url || url === false || isFalseyString(url)) {
+        return;
+      }
+      try {
+        const isString = typeof url === 'string';
+        const trimmed = isString ? url.trim() : '';
+        const hasCustom = isString && trimmed.length > 0 && trimmed.toLowerCase() !== 'true';
+        const src = hasCustom ? url : '/chime.mp3';
+        let a = window.__pinokioChimeAudio;
+        if (!a) {
+          a = new Audio(src);
+          a.preload = 'auto';
+          a.loop = false;
+          a.muted = false;
+          window.__pinokioChimeAudio = a;
+        } else {
+          try { if (a.src && !a.src.endsWith(src)) a.src = src; } catch (_) {}
+        }
+        try { a.currentTime = 0; } catch (_) {}
+        const p = a.play();
+        if (p && typeof p.catch === 'function') { p.catch(() => {}); }
+        if (typeof navigator !== 'undefined' && typeof navigator.vibrate === 'function') {
+          try { navigator.vibrate(80); } catch (_) {}
+        }
+      } catch (_) {}
+    };
+
+    const listen = () => {
+      const SocketCtor = typeof window.Socket === 'function' ? window.Socket : (typeof Socket === 'function' ? Socket : null);
+      if (!SocketCtor || typeof WebSocket === 'undefined') {
+        return;
+      }
+      const socket = new SocketCtor();
+      try {
+        socket.run({ method: 'kernel.notifications', mode: 'listen', device_id: (typeof window.PinokioGetDeviceId === 'function') ? window.PinokioGetDeviceId() : undefined }, (packet) => {
+          if (!packet || packet.id !== 'kernel.notifications' || packet.type !== 'notification') {
+            return;
+          }
+          const payload = packet.data || {};
+          // If targeted to a specific device, ignore only when our id exists and mismatches
+          try {
+            const targetId = (typeof payload.device_id === 'string' && payload.device_id.trim()) ? payload.device_id.trim() : null;
+            if (targetId) {
+              const myId = (typeof window.PinokioGetDeviceId === 'function') ? window.PinokioGetDeviceId() : null;
+              if (myId && myId !== targetId) return;
+            }
+          } catch (_) {}
+          flashIndicator(payload.message);
+          tryPlay(payload.sound);
+        }).then(() => {
+          // socket closed; ignore
+        }).catch(() => {});
+        window.__pinokioTopNotifySocket = socket;
+      } catch (_) {}
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', listen, { once: true });
+    } else {
+      listen();
+    }
+  })();
 })();