pinokiod 3.133.0 → 3.135.0

package/kernel/connect/backend.js

@@ -47,7 +47,6 @@ class Backend {
     let authPath = this.kernel.path(`connect/${this.name}/auth.json`)
     this.auth = (await this.kernel.loader.load(authPath)).resolved
     if (!this.auth) {
-      console.log("not authenticated")
       return null
     }
     if (!this.auth.refresh_token) {

package/kernel/connect/providers/huggingface/index.js

@@ -38,7 +38,6 @@ class Huggingface {
     let authPath = this.kernel.path('connect/huggingface.json')
     this.auth = (await this.kernel.loader.load(authPath)).resolved
     if (!this.auth) {
-      console.log("not authenticated")
       return null
     }
     if (!this.auth.refresh_token) {

package/kernel/index.js

@@ -488,7 +488,7 @@ class Kernel {
     let changed
     let new_config = JSON.stringify(await this.peer.current_host())
     if (this.old_config !== new_config) {
-      console.log("Proc config has changed. update router.")
+//      console.log("Proc config has changed. update router.")
       changed = true
     } else {
 //        console.log("Proc config is the same")

package/kernel/util.js

@@ -30,6 +30,70 @@ const {
 
 
 const platform = os.platform()
+const WINDOWS_TOAST_APP_ID = process.env.PINOKIO_WINDOWS_APP_ID || 'computer.pinokio'
+const DEFAULT_CHIME_URL_PATH = '/chime.mp3'
+const pushListeners = new Set()
+
+function registerPushListener(listener) {
+  if (typeof listener !== 'function') {
+    throw new TypeError('push listener must be a function')
+  }
+  pushListeners.add(listener)
+  return () => pushListeners.delete(listener)
+}
+
+function emitPushEvent(event) {
+  if (!event) {
+    return
+  }
+  pushListeners.forEach((listener) => {
+    try {
+      listener(event)
+    } catch (err) {
+      console.error('Push listener error:', err)
+    }
+  })
+}
+
+function resolvePublicAssetUrl(filePath) {
+  if (!filePath) {
+    return null
+  }
+  if (/^https?:\/\//i.test(filePath)) {
+    return filePath
+  }
+  try {
+    const absolute = path.resolve(filePath)
+    const publicRoot = path.resolve(__dirname, '../server/public')
+    if (absolute === publicRoot) {
+      return '/'
+    }
+    if (absolute.startsWith(publicRoot + path.sep) || absolute === publicRoot) {
+      const relative = path.relative(publicRoot, absolute).replace(/\\/g, '/')
+      return '/' + relative
+    }
+  } catch (_) {
+    // ignore resolution failures
+  }
+  return null
+}
+
+function soundTargetToClientUrl(target) {
+  if (!target) {
+    return null
+  }
+  if (target.kind === 'url') {
+    return target.value
+  }
+  if (target.kind === 'file') {
+    const resolved = path.resolve(target.value)
+    if (resolved === DEFAULT_CHIME_PATH) {
+      return DEFAULT_CHIME_URL_PATH
+    }
+    return resolvePublicAssetUrl(resolved)
+  }
+  return null
+}
 function ensureNotifierBinaries() {
   if (platform !== 'darwin') {
     return
@@ -729,10 +793,39 @@ function push(params) {
   if (!notifyParams.contentImage) {
     notifyParams.contentImage = path.resolve(__dirname, "../server/public/pinokio-black.png")
   }
+  if (platform === 'win32') {
+    // Ensure Windows toast branding aligns with Pinokio assets.
+    if (!notifyParams.icon && notifyParams.contentImage) {
+      notifyParams.icon = notifyParams.contentImage
+    }
+    if (!notifyParams.appID && !notifyParams.appName) {
+      notifyParams.appID = WINDOWS_TOAST_APP_ID
+    }
+  }
+
+  const clientSoundUrl = soundTargetToClientUrl(customSoundTarget)
   if (customSoundTarget) {
     notifyParams.sound = false
-    scheduleSoundPlayback(customSoundTarget)
+    const shouldPlayLocally = platform !== 'win32' || !clientSoundUrl
+    if (shouldPlayLocally) {
+      scheduleSoundPlayback(customSoundTarget)
+    }
+  }
+
+  const clientImage = resolvePublicAssetUrl(notifyParams.contentImage) || resolvePublicAssetUrl(notifyParams.image)
+  const eventPayload = {
+    id: randomUUID(),
+    title: notifyParams.title,
+    subtitle: notifyParams.subtitle || null,
+    message: notifyParams.message || '',
+    image: clientImage,
+    sound: clientSoundUrl,
+    timestamp: Date.now(),
+    platform,
   }
+
+  emitPushEvent(eventPayload)
+
   console.log("notifyParams", notifyParams)
   notifier.notify(notifyParams)
 }
@@ -1076,5 +1169,34 @@ const rewrite_localhost= (kernel, obj, source) => {
 
 
 module.exports = {
-  parse_env, log_path, api_path, api_name, update_env, parse_env_detail, openfs, port_running, du, is_port_available, find_python, find_venv, fill_object, run, openURL, u2p, p2u, log, diffLinesWithContext, classifyChange, push, filepicker, exists, clipboard, mergeLines, ignore_subrepos, rewrite_localhost, symlink, file_type
+  parse_env,
+  log_path,
+  api_path,
+  api_name,
+  update_env,
+  parse_env_detail,
+  openfs,
+  port_running,
+  du,
+  is_port_available,
+  find_python,
+  find_venv,
+  fill_object,
+  run,
+  openURL,
+  u2p,
+  p2u,
+  log,
+  diffLinesWithContext,
+  classifyChange,
+  push,
+  filepicker,
+  exists,
+  clipboard,
+  mergeLines,
+  ignore_subrepos,
+  rewrite_localhost,
+  symlink,
+  file_type,
+  registerPushListener,
 }

package/package.json

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

package/server/index.js

@@ -449,9 +449,6 @@ class Server {
           } else {
             cfg.menu = cfg.menu(this.kernel, this.kernel.info)
           }
-          cfg = await this.renderIndex(name, cfg)
-        } else if (Array.isArray(cfg.menu)) {
-          cfg = await this.renderIndex(name, cfg)
         }
       } else {
         cfg = await this.renderIndex(name, cfg)
@@ -698,7 +695,7 @@ class Server {
     if (config && config.version) {
       let coerced = semver.coerce(config.version)
       if (semver.satisfies(coerced, this.kernel.schema)) {
-        console.log("semver satisfied", config.version, this.kernel.schema)
+//        console.log("semver satisfied", config.version, this.kernel.schema)
       } else {
         console.log("semver NOT satisfied", config.version, this.kernel.schema)
         err = `Please update to the latest Pinokio (current script version: ${config.version}, supported: ${this.kernel.schema})`
@@ -3722,7 +3719,11 @@ class Server {
     this.app.use(express.json());
     this.app.use(express.urlencoded({ extended: true }));
     this.app.use(cookieParser());
-    this.app.use(session({secret: "secret" }))
+    this.app.use(session({
+      secret: "secret",
+      resave: false,
+      saveUninitialized: false
+    }))
     this.app.use((req, res, next) => {
       const originalRedirect = res.redirect;
       res.redirect = function (url) {

package/server/public/common.js

@@ -1398,14 +1398,323 @@ const open_url2 = (href, target, features) => {
     window.open(href, "_self", features)
   }
 }
-hotkeys("ctrl+t,cmd+t,ctrl+n,cmd+n", (e) => {
-  let agent = document.body.getAttribute("data-agent")
-  if (agent === "electron") {
-    window.open(location.href, "_blank", "pinokio")
+if (typeof hotkeys === 'function') {
+  hotkeys("ctrl+t,cmd+t,ctrl+n,cmd+n", (e) => {
+    let agent = document.body.getAttribute("data-agent")
+    if (agent === "electron") {
+      window.open(location.href, "_blank", "pinokio")
+    } else {
+      window.open(location.href, "_blank")
+    }
+  })
+}
+
+(function initNotificationAudioBridge() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  if (window.__pinokioNotificationAudioInitialized) {
+    return;
+  }
+  window.__pinokioNotificationAudioInitialized = true;
+
+  const CHANNEL_ID = 'kernel.notifications';
+  const pendingSounds = [];
+  let isPlaying = false;
+  let currentSocket = null;
+  let reconnectTimeout = null;
+  let activeAudio = null;
+
+  const leaderStorageKey = 'pinokio.notification.leader';
+  const leaderHeartbeatMs = 5000;
+  const leaderStaleMs = 15000;
+  const tabId = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+  const storageEnabled = (() => {
+    try {
+      const testKey = '__pinokio_notification_test__';
+      localStorage.setItem(testKey, '1');
+      localStorage.removeItem(testKey);
+      return true;
+    } catch (_) {
+      return false;
+    }
+  })();
+  let isLeader = false;
+  let heartbeatTimer = null;
+  let leadershipCheckTimer = null;
+
+  const parseLeaderValue = (value) => {
+    if (!value) return null;
+    try {
+      return JSON.parse(value);
+    } catch (_) {
+      return null;
+    }
+  };
+
+  const writeHeartbeat = () => {
+    try {
+      localStorage.setItem(leaderStorageKey, JSON.stringify({ id: tabId, ts: Date.now() }));
+    } catch (err) {
+      console.warn('Notification leader heartbeat failed:', err);
+    }
+  };
+
+  const clearHeartbeat = () => {
+    if (heartbeatTimer) {
+      clearInterval(heartbeatTimer);
+      heartbeatTimer = null;
+    }
+  };
+
+  const stopSocket = () => {
+    if (currentSocket && typeof currentSocket.close === 'function') {
+      try {
+        currentSocket.close();
+      } catch (_) {
+        // ignore
+      }
+    }
+    currentSocket = null;
+  };
+
+  const stopAudio = () => {
+    pendingSounds.length = 0;
+    if (activeAudio) {
+      try {
+        activeAudio.pause();
+        activeAudio.currentTime = 0;
+      } catch (_) {
+        // ignore
+      }
+      activeAudio = null;
+    }
+    isPlaying = false;
+  };
+
+  const resignLeadership = () => {
+    if (!isLeader) {
+      return;
+    }
+    isLeader = false;
+    clearHeartbeat();
+    if (reconnectTimeout != null) {
+      clearTimeout(reconnectTimeout);
+      reconnectTimeout = null;
+    }
+    stopSocket();
+    stopAudio();
+    try {
+      const stored = parseLeaderValue(localStorage.getItem(leaderStorageKey));
+      if (stored && stored.id === tabId) {
+        localStorage.removeItem(leaderStorageKey);
+      }
+    } catch (_) {
+      // ignore
+    }
+  };
+
+  const startLeadership = () => {
+    if (isLeader) {
+      return;
+    }
+    isLeader = true;
+    writeHeartbeat();
+    if (!heartbeatTimer) {
+      heartbeatTimer = setInterval(writeHeartbeat, leaderHeartbeatMs);
+    }
+    connect();
+  };
+
+  const playNextSound = () => {
+    if (isPlaying) {
+      return;
+    }
+    const next = pendingSounds.shift();
+    if (!next) {
+      return;
+    }
+    isPlaying = true;
+    activeAudio = new Audio(next);
+    activeAudio.preload = 'auto';
+    const cleanup = () => {
+      if (!activeAudio) {
+        return;
+      }
+      activeAudio.removeEventListener('ended', handleEnded);
+      activeAudio.removeEventListener('error', handleError);
+      activeAudio = null;
+      isPlaying = false;
+      playNextSound();
+    };
+    const handleEnded = () => cleanup();
+    const handleError = (err) => {
+      console.error('Notification audio playback failed:', err);
+      cleanup();
+    };
+    activeAudio.addEventListener('ended', handleEnded, { once: true });
+    activeAudio.addEventListener('error', handleError, { once: true });
+    const playPromise = activeAudio.play();
+    if (playPromise && typeof playPromise.catch === 'function') {
+      playPromise.catch((err) => {
+        console.error('Notification audio play() rejected:', err);
+        cleanup();
+      });
+    }
+  };
+
+  const enqueueSound = (url) => {
+    if (!url) {
+      return;
+    }
+    pendingSounds.push(url);
+    playNextSound();
+  };
+
+  const handlePacket = (packet) => {
+    if (!packet || packet.id !== CHANNEL_ID || packet.type !== 'notification') {
+      return;
+    }
+    const payload = packet.data || {};
+    if (typeof payload.sound === 'string' && payload.sound) {
+      enqueueSound(payload.sound);
+    }
+  };
+
+  const attemptLeadership = () => {
+    if (isLeader) {
+      writeHeartbeat();
+      return;
+    }
+    let current = null;
+    try {
+      current = parseLeaderValue(localStorage.getItem(leaderStorageKey));
+    } catch (_) {
+      current = null;
+    }
+    const now = Date.now();
+    const isStale = !current || !current.ts || (now - current.ts) > leaderStaleMs;
+    if (isStale || (current && current.id === tabId)) {
+      writeHeartbeat();
+      const freshlyStored = parseLeaderValue(localStorage.getItem(leaderStorageKey));
+      if (freshlyStored && freshlyStored.id === tabId) {
+        startLeadership();
+      }
+    }
+  };
+
+  const scheduleReconnect = (delay) => {
+    if (!isLeader) {
+      return;
+    }
+    if (reconnectTimeout != null) {
+      return;
+    }
+    reconnectTimeout = setTimeout(() => {
+      reconnectTimeout = null;
+      connect();
+    }, delay);
+  };
+
+  const connect = () => {
+    if (!isLeader) {
+      return;
+    }
+    const SocketCtor = typeof window.Socket === 'function' ? window.Socket : (typeof Socket === 'function' ? Socket : null);
+    if (!SocketCtor) {
+      return;
+    }
+    if (typeof WebSocket === 'undefined') {
+      return;
+    }
+    if (currentSocket && currentSocket.ws && currentSocket.ws.readyState === WebSocket.OPEN) {
+      return;
+    }
+    if (currentSocket && typeof currentSocket.close === 'function') {
+      try {
+        currentSocket.close();
+      } catch (_) {
+        // ignore
+      }
+    }
+    const socket = new SocketCtor();
+    try {
+      const promise = socket.run(
+        {
+          method: CHANNEL_ID,
+          mode: 'listen',
+        },
+        handlePacket
+      );
+      currentSocket = socket;
+      promise.then(() => {
+        // Attempt to reconnect after a brief delay when the socket closes normally.
+        if (currentSocket === socket) {
+          currentSocket = null;
+          scheduleReconnect(1500);
+        }
+      }).catch((err) => {
+        console.warn('Notification listener socket closed with error:', err);
+        if (currentSocket === socket) {
+          currentSocket = null;
+          scheduleReconnect(2500);
+        }
+      });
+      window.__pinokioNotificationSocket = socket;
+    } catch (err) {
+      console.error('Failed to establish notification listener socket:', err);
+      scheduleReconnect(3000);
+    }
+  };
+
+  if (!storageEnabled) {
+    isLeader = true;
+    const start = () => connect();
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', start, { once: true });
+    } else {
+      connect();
+    }
+    window.addEventListener('beforeunload', () => {
+      stopSocket();
+      stopAudio();
+    });
+    return;
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', connect, { once: true });
   } else {
-    window.open(location.href, "_blank")
+    connect();
   }
-})
+
+  if (!leadershipCheckTimer) {
+    leadershipCheckTimer = setInterval(attemptLeadership, leaderHeartbeatMs);
+  }
+
+  window.addEventListener('storage', (event) => {
+    if (event.key !== leaderStorageKey) {
+      return;
+    }
+    const data = parseLeaderValue(event.newValue);
+    if (data && data.id === tabId) {
+      startLeadership();
+    } else {
+      resignLeadership();
+    }
+  });
+
+  window.addEventListener('beforeunload', () => {
+    if (leadershipCheckTimer) {
+      clearInterval(leadershipCheckTimer);
+      leadershipCheckTimer = null;
+    }
+    resignLeadership();
+  });
+
+  // Attempt to become leader immediately on load.
+  attemptLeadership();
+})();
 const refreshParent = (e) => {
 //  if (window.parent === window.top) {
     window.parent.postMessage(e, "*")

package/server/public/nav.js

@@ -18,6 +18,16 @@ document.addEventListener("DOMContentLoaded", () => {
     return;
   }
 
+  const dispatchHeaderState = (minimized, detail = {}) => {
+    if (typeof window === "undefined" || typeof window.CustomEvent !== "function") {
+      return;
+    }
+    const payload = { minimized, ...detail };
+    document.dispatchEvent(new CustomEvent("pinokio:header-state", { detail: payload }));
+    const aliasEvent = minimized ? "pinokio:header-minimized" : "pinokio:header-restored";
+    document.dispatchEvent(new CustomEvent(aliasEvent, { detail: { ...payload } }));
+  };
+
   const headerTitle = header.querySelector("h1") || header;
   let dragHandle = headerTitle.querySelector(".header-drag-handle");
   if (!dragHandle) {
@@ -45,6 +55,8 @@ document.addEventListener("DOMContentLoaded", () => {
     transitionHandler: null,
   };
 
+  dispatchHeaderState(state.minimized, { phase: "init" });
+
   const MIN_MARGIN = 8;
 
   const clampPosition = (left, top) => {
@@ -139,6 +151,8 @@ document.addEventListener("DOMContentLoaded", () => {
     header.classList.add("minimized");
     applyPosition(targetLeft, targetTop);
 
+    dispatchHeaderState(true, { phase: "start" });
+
     const lastRect = header.getBoundingClientRect();
     const deltaX = firstRect.left - lastRect.left;
     const deltaY = firstRect.top - lastRect.top;
@@ -164,6 +178,7 @@ document.addEventListener("DOMContentLoaded", () => {
       state.transitionHandler = null;
       stopTransition();
       state.minimized = true;
+      dispatchHeaderState(true, { phase: "settled" });
     };
 
     header.addEventListener("transitionend", state.transitionHandler);
@@ -189,6 +204,8 @@ document.addEventListener("DOMContentLoaded", () => {
     header.style.right = state.originalPosition.right;
     header.style.bottom = state.originalPosition.bottom;
 
+    dispatchHeaderState(false, { phase: "start" });
+
     const lastRect = header.getBoundingClientRect();
     const deltaX = firstRect.left - lastRect.left;
     const deltaY = firstRect.top - lastRect.top;
@@ -213,6 +230,7 @@ document.addEventListener("DOMContentLoaded", () => {
       state.hasCustomPosition = false;
       state.lastLeft = parseFloat(header.style.left) || 0;
       state.lastTop = parseFloat(header.style.top) || 0;
+      dispatchHeaderState(false, { phase: "settled" });
     };
 
     header.addEventListener("transitionend", state.transitionHandler);

package/server/socket.js

@@ -3,6 +3,7 @@ const WebSocket = require('ws');
 const path = require('path')
 const Util = require("../kernel/util")
 const Environment = require("../kernel/environment")
+const NOTIFICATION_CHANNEL = 'kernel.notifications'
 class Socket {
   constructor(parent) {
     this.buffer = {}
@@ -15,6 +16,8 @@ class Socket {
 //    this.kernel = parent.kernel
     const wss = new WebSocket.Server({ server: this.parent.server })
     this.subscriptions = new Map(); // Initialize a Map to store the WebSocket connections interested in each event
+    this.notificationChannel = NOTIFICATION_CHANNEL
+    this.notificationBridgeDispose = null
     this.parent.kernel.api.listen("server.socket", this.trigger.bind(this))
     wss.on('connection', (ws, request) => {
       ws._headers = request.headers;
@@ -25,8 +28,15 @@ class Socket {
       ws._origin = request.headers.origin;
       ws.on('close', () => {
         this.subscriptions.forEach((set, eventName) => {
+          if (!set) {
+            return;
+          }
           set.delete(ws);
+          if (set.size === 0) {
+            this.subscriptions.delete(eventName);
+          }
         });
+        this.checkNotificationBridge();
       });
       ws.on('message', async (message, isBinary) => {
         let req
@@ -217,7 +227,11 @@ class Socket {
     if (!this.subscriptions.has(id)) {
       this.subscriptions.set(id, new Set());
     }
-    this.subscriptions.get(id).add(ws);
+    const set = this.subscriptions.get(id)
+    set.add(ws);
+    if (set.size === 1 && id === this.notificationChannel) {
+      this.ensureNotificationBridge();
+    }
   }
   trigger(e) {
     // send to id session
@@ -321,6 +335,49 @@ class Socket {
       }
     }
   }
+
+  broadcastNotification(payload) {
+    if (!payload) {
+      return
+    }
+    const subscribers = this.subscriptions.get(this.notificationChannel)
+    if (!subscribers || subscribers.size === 0) {
+      return
+    }
+    const envelope = {
+      id: this.notificationChannel,
+      type: 'notification',
+      data: payload,
+    }
+    const frame = JSON.stringify(envelope)
+    subscribers.forEach((subscriber) => {
+      if (subscriber.readyState === WebSocket.OPEN) {
+        subscriber.send(frame)
+      }
+    })
+  }
+
+  ensureNotificationBridge() {
+    if (this.notificationBridgeDispose) {
+      return
+    }
+    this.notificationBridgeDispose = Util.registerPushListener((payload) => {
+      this.broadcastNotification(payload)
+    })
+  }
+
+  checkNotificationBridge() {
+    const subscribers = this.subscriptions.get(this.notificationChannel)
+    if ((!subscribers || subscribers.size === 0) && this.notificationBridgeDispose) {
+      try {
+        this.notificationBridgeDispose()
+      } catch (err) {
+        console.error('Failed to dispose notification bridge:', err)
+      }
+      this.notificationBridgeDispose = null
+    }
+  }
+
   async log_buffer(key, buf) {
 
     /*

package/server/views/app.ejs

@@ -180,6 +180,20 @@ body.dark .appcanvas_filler {
   --sidebar-tab-outline: var(--pinokio-sidebar-tabbar-border);
 }
 
+.appcanvas > aside.appcanvas-aside-animating {
+  will-change: height, opacity;
+}
+
+.appcanvas > aside.appcanvas-aside-collapsed {
+  height: 0 !important;
+  opacity: 0;
+  pointer-events: none;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 /*
 body.dark .appcanvas > aside {
   background: var(--pinokio-sidebar-tabbar-bg);
@@ -2829,7 +2843,7 @@ body.dark {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>
@@ -8554,6 +8568,153 @@ body.dark {
 
   </script>
 <% } %>
+<script>
+(() => {
+  const aside = document.querySelector(".appcanvas > aside")
+  if (!aside) {
+    return
+  }
+
+  const collapsedClass = "appcanvas-aside-collapsed"
+  const animatingClass = "appcanvas-aside-animating"
+  const collapseDuration = 420
+  const collapseEasing = "cubic-bezier(0.22, 1, 0.36, 1)"
+  const expandEasing = "cubic-bezier(0.18, 0.85, 0.4, 1)"
+
+  let transitionHandler = null
+  let queuedFrame = null
+
+  const clearAnimation = () => {
+    if (transitionHandler) {
+      aside.removeEventListener("transitionend", transitionHandler)
+      transitionHandler = null
+    }
+    if (queuedFrame !== null) {
+      cancelAnimationFrame(queuedFrame)
+      queuedFrame = null
+    }
+    aside.classList.remove(animatingClass)
+    aside.style.transition = ""
+    aside.style.height = ""
+    aside.style.opacity = ""
+  }
+
+  const finish = (minimized) => {
+    aside.classList.toggle(collapsedClass, minimized)
+    aside.classList.remove(animatingClass)
+    aside.style.transition = ""
+    aside.style.height = ""
+    aside.style.opacity = ""
+    aside.dataset.asideState = minimized ? "collapsed" : "expanded"
+  }
+
+  const collapse = (immediate) => {
+    if (aside.dataset.asideState === "collapsed" && !immediate) {
+      return
+    }
+    clearAnimation()
+    if (immediate) {
+      finish(true)
+      return
+    }
+    const startHeight = aside.getBoundingClientRect().height
+    if (startHeight <= 0.5) {
+      finish(true)
+      return
+    }
+
+    aside.classList.add(animatingClass)
+    aside.style.height = `${startHeight}px`
+    aside.style.opacity = getComputedStyle(aside).opacity || "1"
+    aside.dataset.asideState = "animating"
+
+    queuedFrame = requestAnimationFrame(() => {
+      queuedFrame = null
+      aside.style.transition = `height ${collapseDuration}ms ${collapseEasing}, opacity ${collapseDuration - 120}ms ease`
+      aside.style.height = "0px"
+      aside.style.opacity = "0"
+    })
+
+    transitionHandler = (event) => {
+      if (event.target !== aside || event.propertyName !== "height") {
+        return
+      }
+      aside.removeEventListener("transitionend", transitionHandler)
+      transitionHandler = null
+      finish(true)
+    }
+    aside.addEventListener("transitionend", transitionHandler)
+  }
+
+  const expand = (immediate) => {
+    if (aside.dataset.asideState === "expanded" && !immediate) {
+      return
+    }
+    clearAnimation()
+    if (immediate) {
+      finish(false)
+      return
+    }
+
+    aside.classList.remove(collapsedClass)
+    const targetHeight = aside.scrollHeight
+    aside.classList.add(animatingClass)
+    aside.style.height = "0px"
+    aside.style.opacity = "0"
+    aside.dataset.asideState = "animating"
+
+    aside.offsetHeight
+
+    queuedFrame = requestAnimationFrame(() => {
+      queuedFrame = null
+      aside.style.transition = `height ${collapseDuration}ms ${expandEasing}, opacity ${collapseDuration - 140}ms ease`
+      aside.style.height = `${targetHeight}px`
+      aside.style.opacity = ""
+    })
+
+    transitionHandler = (event) => {
+      if (event.target !== aside || event.propertyName !== "height") {
+        return
+      }
+      aside.removeEventListener("transitionend", transitionHandler)
+      transitionHandler = null
+      finish(false)
+    }
+    aside.addEventListener("transitionend", transitionHandler)
+  }
+
+  const setAside = (minimized, immediate) => {
+    if (minimized) {
+      collapse(immediate)
+    } else {
+      expand(immediate)
+    }
+  }
+
+  const header = document.querySelector("header.navheader")
+  const initialMinimized = !!(header && header.classList.contains("minimized"))
+  setAside(initialMinimized, true)
+
+  document.addEventListener("pinokio:header-state", (event) => {
+    if (!event || !event.detail) {
+      return
+    }
+    const { minimized, phase } = event.detail
+    if (phase === "init") {
+      setAside(!!minimized, true)
+      return
+    }
+    if (phase === "start") {
+      setAside(!!minimized, false)
+      return
+    }
+    if (phase === "settled") {
+      clearAnimation()
+      finish(!!minimized)
+    }
+  })
+})()
+</script>
 <script src="/tab-idle-notifier.js"></script>
 </body>
 </html>

package/server/views/connect/x.ejs

@@ -206,7 +206,7 @@ pre {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/connect.ejs

@@ -831,7 +831,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/container.ejs

@@ -345,7 +345,7 @@ iframe {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/download.ejs

@@ -134,7 +134,7 @@ body.frozen {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/explore.ejs

@@ -135,7 +135,7 @@ body main iframe {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/form.ejs

@@ -168,7 +168,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/frame.ejs

@@ -64,7 +64,7 @@ main iframe {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/github.ejs

@@ -247,7 +247,7 @@ ol {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/help.ejs

@@ -268,7 +268,7 @@ body.dark .item .tile .badge {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/index.ejs

@@ -436,7 +436,7 @@ body.dark aside .current.selected {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/index2.ejs

@@ -273,7 +273,7 @@ body.dark .open-menu, body.dark .browse {
     <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
     <a class='btn2' href="/home?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
     <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-      <div><i class="fa-solid fa-window-maximize"></i></div>
+      <div><i class="fa-solid fa-expand"></i></div>
     </button>
     <button id='new-window' title='open a new window' class='btn2' data-agent="<%=agent%>"><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
   </div>

package/server/views/init/index.ejs

@@ -1533,7 +1533,7 @@ body.dark .ace-editor {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/mini.ejs

@@ -768,7 +768,7 @@ body.dark .appcanvas {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/net.ejs

@@ -554,7 +554,7 @@ document.addEventListener('DOMContentLoaded', function() {
       <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
     </a>
     <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-      <div><i class="fa-solid fa-window-maximize"></i></div>
+      <div><i class="fa-solid fa-expand"></i></div>
     </button>
     <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>

package/server/views/network.ejs

@@ -1067,7 +1067,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/network2.ejs

@@ -429,7 +429,7 @@ table h3 {
   <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
   <a class='btn2' href="/home?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
   <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-    <div><i class="fa-solid fa-window-maximize"></i></div>
+    <div><i class="fa-solid fa-expand"></i></div>
   </button>
   <button id='new-window' title='open a new window' class='btn2' data-agent="<%=agent%>"><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
 </div>

package/server/views/old_network.ejs

@@ -415,7 +415,7 @@ input:checked + .slider:before {
   <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
   <a class='btn2' href="/home?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
   <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-    <div><i class="fa-solid fa-window-maximize"></i></div>
+    <div><i class="fa-solid fa-expand"></i></div>
   </button>
   <button id='new-window' title='open a new window' class='btn2' data-agent="<%=agent%>"><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
 </div>

package/server/views/prototype/index.ejs

@@ -1015,7 +1015,7 @@ body.dark .appcanvas {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/review.ejs

@@ -955,7 +955,7 @@ body.dark .top-menu .btn2.selected {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/screenshots.ejs

@@ -727,7 +727,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/settings.ejs

@@ -399,7 +399,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/setup.ejs

@@ -145,7 +145,7 @@ body {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/setup_home.ejs

@@ -161,7 +161,7 @@ body.dark .card {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/terminals.ejs

@@ -382,7 +382,7 @@ body.dark .plugin-option:hover {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>

package/server/views/tools.ejs

@@ -1117,7 +1117,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
 <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
-  <div><i class="fa-solid fa-window-maximize"></i></div>
+  <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <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>