pinokiod 3.132.0 → 3.134.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/router/localhost_static_router.js

@@ -1,3 +1,4 @@
+const fs = require('fs')
 const path = require('path')
 const Common = require('./common')
 const Rewriter = require('./rewriter')
@@ -23,6 +24,19 @@ class LocalhostStaticRouter extends Processor {
       }
     }
     for(let { api_name, config } of configs) {
+      const apiRoot = this.router.kernel.path('api', api_name)
+      const indexPath = path.join(apiRoot, 'index.html')
+      const hasMenu = Boolean(config.menu)
+      if (hasMenu) {
+        delete this.router.rewrite_mapping[api_name]
+        continue
+      }
+      const hasIndex = fs.existsSync(indexPath)
+      const fileServerOptions = {}
+      if (hasIndex) {
+        fileServerOptions.index_names = ["index.html"]
+      }
+      const effectiveFileServerOptions = Object.keys(fileServerOptions).length ? { ...fileServerOptions } : undefined
       for(let domain in config.dns) {
         let localhost_match
         let peer_match
@@ -45,11 +59,13 @@ class LocalhostStaticRouter extends Processor {
               route: rewrite,
               match: [localhost_match],
               dial: local_dial,
+              fileServerOptions: effectiveFileServerOptions,
             })
             this.rewriter.handle({
               route: rewrite,
               match: [peer_match],
               dial: peer_dial,
+              fileServerOptions: effectiveFileServerOptions,
             })
 
 //            this.router.add_rewrite({ route: new_path, match, peer, dial })
@@ -64,7 +80,7 @@ class LocalhostStaticRouter extends Processor {
 
             
 
-            this.router.rewrite_mapping[api_name] = {
+            const rewriteEntry = {
               name: api_name,
               internal_router: [
                 `${local_dial}${rewrite}`,
@@ -75,6 +91,10 @@ class LocalhostStaticRouter extends Processor {
                 peer_match
               ]
             }
+            if (effectiveFileServerOptions) {
+              rewriteEntry.file_server_options = effectiveFileServerOptions
+            }
+            this.router.rewrite_mapping[api_name] = rewriteEntry
 //            this.connector.handle({
 //              match: peer_match,
 //              connector: {

package/kernel/router/peer_static_router.js

@@ -33,10 +33,14 @@ class PeerStaticRouter extends Processor {
     let url = new URL("http://" + rewrite_mapping.external_ip)
     let dial = url.host
     let rewrite = url.pathname
+    const fileServerOptions = rewrite_mapping.file_server_options
+      ? { ...rewrite_mapping.file_server_options }
+      : undefined
     this.rewriter.handle({
       route: url.pathname,
       match: rewrite_mapping.external_router,
       dial: url.host,
+      fileServerOptions,
     })
   }
 }

package/kernel/router/rewriter.js

@@ -4,7 +4,7 @@ class Rewriter extends Processor {
     super()
     this.router = router
   }
-  handle({ match, dial, route }) {
+  handle({ match, dial, route, fileServerOptions }) {
     //let rewrite = `${route}/{path}`
     //let rewrite = `${route}{http.request.uri}`
     /*
@@ -35,24 +35,32 @@ class Rewriter extends Processor {
 
     // stript the leading /asset/ => (/asset/api/test => /api/test)
     const asset_path = this.router.kernel.path(route.replace(/\/asset\//, ''))
-    let handler = [{
+
+    const fileServerHandler = {
       "handler": "file_server",
       "root": asset_path,
-      "browse": { },
-      "index_names": ["index.html"]
-    }]
+      ...fileServerOptions
+    }
+
+    const handlers = [fileServerHandler]
 
     // if the dial port has been overridden by router.custom_routers, use that instead
     let parsed_dial = this.parse_ip(dial)
     let override_handler = this.router.custom_routers[String(parsed_dial.port)]
     if (override_handler) {
-      handler = override_handler
+      this.router.config.apps.http.servers.main.routes.push({
+        "match": [{
+          "host": match ,
+        }],
+        "handle": override_handler
+      })
+      return
     }
     this.router.config.apps.http.servers.main.routes.push({
       "match": [{
         "host": match ,
       }],
-      "handle": handler
+      "handle": handlers
     })
   }
 }

package/package.json

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

package/server/index.js

@@ -460,9 +460,16 @@ class Server {
   }
   async renderIndex(name, cfg) {
     let p = this.kernel.path("api", name)
-    let html_path = path.resolve(p, "index.html")
-    let html_exists = await this.kernel.exists(html_path)
-    if (html_exists) {
+    let index_path = path.resolve(p, "index.html")
+    let index_exists = await this.kernel.exists(index_path)
+    let c = cfg
+    let menu = []
+    if (cfg.menu) {
+      ({ menu, ...c } = cfg)
+    }
+    console.log("Menu", menu)
+    console.log("c", c)
+    if (index_exists) {
       return Object.assign({
         title: name, 
         menu: [{
@@ -470,8 +477,8 @@ class Server {
           icon: "fa-solid fa-link",
           text: "index.html",
           href: `/asset/api/${name}/index.html`,
-        }]
-      }, cfg)
+        }].concat(menu)
+      }, c)
     } else {
       return Object.assign({
         title: name, 
@@ -480,8 +487,8 @@ class Server {
           icon: "fa-solid fa-link",
           text: "Project Files",
           href: `/files/api/${name}`,
-        }]
-      }, cfg)
+        }].concat(menu)
+      }, c)
     }
   }
   async getGit(ref, filepath) {
@@ -688,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})`
@@ -3712,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/nav.js

@@ -1,12 +1,309 @@
 document.addEventListener("DOMContentLoaded", () => {
-  if (document.querySelector("#new-window")) {
-    document.querySelector("#new-window").addEventListener("click", (e) => {
-      let agent = document.body.getAttribute("data-agent")
+  const newWindowButton = document.querySelector("#new-window");
+  if (newWindowButton) {
+    newWindowButton.addEventListener("click", (event) => {
+      const agent = document.body.getAttribute("data-agent");
       if (agent === "electron") {
-        window.open("/", "_blank", "pinokio")
+        window.open("/", "_blank", "pinokio");
       } else {
-        window.open("/", "_blank")
+        window.open("/", "_blank");
       }
-    })
+    });
   }
-})
+
+  const header = document.querySelector("header.navheader");
+  const minimizeButton = document.querySelector("#minimize-header");
+  const homeLink = header ? header.querySelector(".home") : null;
+  if (!header || !minimizeButton || !homeLink) {
+    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) {
+    dragHandle = document.createElement("div");
+    dragHandle.className = "header-drag-handle";
+    dragHandle.setAttribute("aria-hidden", "true");
+    dragHandle.setAttribute("title", "Drag minimized header");
+    headerTitle.insertBefore(dragHandle, homeLink ? homeLink.nextSibling : headerTitle.firstChild);
+  }
+
+  const state = {
+    minimized: header.classList.contains("minimized"),
+    pointerId: null,
+    offsetX: 0,
+    offsetY: 0,
+    lastLeft: parseFloat(header.style.left) || 0,
+    lastTop: parseFloat(header.style.top) || 0,
+    hasCustomPosition: false,
+    originalPosition: {
+      top: header.style.top || "",
+      left: header.style.left || "",
+      right: header.style.right || "",
+      bottom: header.style.bottom || "",
+    },
+    transitionHandler: null,
+  };
+
+  dispatchHeaderState(state.minimized, { phase: "init" });
+
+  const MIN_MARGIN = 8;
+
+  const clampPosition = (left, top) => {
+    const rect = header.getBoundingClientRect();
+    const maxLeft = Math.max(0, window.innerWidth - rect.width);
+    const maxTop = Math.max(0, window.innerHeight - rect.height);
+    return {
+      left: Math.min(Math.max(0, left), maxLeft),
+      top: Math.min(Math.max(0, top), maxTop),
+    };
+  };
+
+  const applyPosition = (left, top) => {
+    header.style.left = `${left}px`;
+    header.style.top = `${top}px`;
+    header.style.right = "auto";
+    header.style.bottom = "auto";
+  };
+
+  const rememberOriginalPosition = () => {
+    state.originalPosition = {
+      top: header.style.top || "",
+      left: header.style.left || "",
+      right: header.style.right || "",
+      bottom: header.style.bottom || "",
+    };
+  };
+
+  const measureRect = (configureClone) => {
+    const clone = header.cloneNode(true);
+    clone.querySelectorAll("[id]").forEach((node) => node.removeAttribute("id"));
+    Object.assign(clone.style, {
+      transition: "none",
+      transform: "none",
+      position: "fixed",
+      visibility: "hidden",
+      pointerEvents: "none",
+      margin: "0",
+      left: "0",
+      top: "0",
+      right: "auto",
+      bottom: "auto",
+      width: "auto",
+      height: "auto",
+    });
+    document.body.appendChild(clone);
+    if (typeof configureClone === "function") {
+      configureClone(clone);
+    }
+    clone.style.right = "auto";
+    clone.style.bottom = "auto";
+    const rect = clone.getBoundingClientRect();
+    clone.remove();
+    return rect;
+  };
+
+  const stopTransition = () => {
+    if (state.transitionHandler) {
+      header.removeEventListener("transitionend", state.transitionHandler);
+      state.transitionHandler = null;
+    }
+    header.classList.remove("transitioning");
+    header.style.transition = "";
+    header.style.transform = "";
+    header.style.transformOrigin = "";
+    header.style.opacity = "";
+    header.style.willChange = "";
+  };
+
+  const minimize = () => {
+    if (state.minimized || header.classList.contains("transitioning")) {
+      return;
+    }
+
+    rememberOriginalPosition();
+
+    const firstRect = header.getBoundingClientRect();
+    const minimizedSize = measureRect((clone) => {
+      clone.classList.add("minimized");
+    });
+
+    const defaultLeft = Math.max(MIN_MARGIN, window.innerWidth - minimizedSize.width - MIN_MARGIN);
+    const defaultTop = Math.max(MIN_MARGIN, window.innerHeight - minimizedSize.height - MIN_MARGIN);
+    const targetLeft = state.hasCustomPosition ? state.lastLeft : defaultLeft;
+    const targetTop = state.hasCustomPosition ? state.lastTop : defaultTop;
+
+    state.lastLeft = targetLeft;
+    state.lastTop = targetTop;
+
+    stopTransition();
+
+    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;
+    const scaleX = firstRect.width / lastRect.width;
+    const scaleY = firstRect.height / lastRect.height;
+
+    header.style.transition = "none";
+    header.style.transformOrigin = "top left";
+    header.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`;
+    header.style.willChange = "transform";
+
+    header.offsetWidth;
+
+    header.classList.add("transitioning");
+    header.style.transition = "transform 520ms cubic-bezier(0.22, 1, 0.36, 1)";
+    header.style.transform = "";
+
+    state.transitionHandler = (event) => {
+      if (event.propertyName !== "transform") {
+        return;
+      }
+      header.removeEventListener("transitionend", state.transitionHandler);
+      state.transitionHandler = null;
+      stopTransition();
+      state.minimized = true;
+      dispatchHeaderState(true, { phase: "settled" });
+    };
+
+    header.addEventListener("transitionend", state.transitionHandler);
+  };
+
+  const restore = () => {
+    if (!state.minimized || header.classList.contains("transitioning")) {
+      return;
+    }
+
+    const firstRect = header.getBoundingClientRect();
+
+    stopTransition();
+
+    header.classList.add("transitioning");
+    header.style.willChange = "transform";
+    header.style.transition = "none";
+    header.style.transformOrigin = "top left";
+
+    header.classList.remove("minimized");
+    header.style.left = state.originalPosition.left;
+    header.style.top = state.originalPosition.top;
+    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;
+    const scaleX = firstRect.width / lastRect.width;
+    const scaleY = firstRect.height / lastRect.height;
+
+    header.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`;
+
+    header.offsetWidth;
+
+    header.style.transition = "transform 560ms cubic-bezier(0.18, 0.85, 0.4, 1)";
+    header.style.transform = "";
+
+    state.transitionHandler = (event) => {
+      if (event.propertyName !== "transform") {
+        return;
+      }
+      header.removeEventListener("transitionend", state.transitionHandler);
+      state.transitionHandler = null;
+      stopTransition();
+      state.minimized = false;
+      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);
+  };
+
+  minimizeButton.addEventListener("click", (event) => {
+    event.preventDefault();
+    minimize();
+  });
+
+  homeLink.addEventListener("click", (event) => {
+    if (!state.minimized) {
+      return;
+    }
+    event.preventDefault();
+    restore();
+  });
+
+  const onPointerDown = (event) => {
+    if (!state.minimized || header.classList.contains("transitioning")) {
+      return;
+    }
+    state.pointerId = event.pointerId;
+    const rect = header.getBoundingClientRect();
+    state.offsetX = event.clientX - rect.left;
+    state.offsetY = event.clientY - rect.top;
+    if (typeof dragHandle.setPointerCapture === "function") {
+      try {
+        dragHandle.setPointerCapture(event.pointerId);
+      } catch (error) {}
+    }
+    dragHandle.classList.add("dragging");
+    event.preventDefault();
+  };
+
+  const onPointerMove = (event) => {
+    if (!state.minimized || state.pointerId !== event.pointerId) {
+      return;
+    }
+    const left = event.clientX - state.offsetX;
+    const top = event.clientY - state.offsetY;
+    const clamped = clampPosition(left, top);
+    state.lastLeft = clamped.left;
+    state.lastTop = clamped.top;
+    state.hasCustomPosition = true;
+    applyPosition(clamped.left, clamped.top);
+  };
+
+  const onPointerEnd = (event) => {
+    if (state.pointerId !== event.pointerId) {
+      return;
+    }
+    if (typeof dragHandle.releasePointerCapture === "function") {
+      try {
+        dragHandle.releasePointerCapture(event.pointerId);
+      } catch (error) {}
+    }
+    dragHandle.classList.remove("dragging");
+    state.pointerId = null;
+  };
+
+  dragHandle.addEventListener("pointerdown", onPointerDown);
+  dragHandle.addEventListener("pointermove", onPointerMove);
+  dragHandle.addEventListener("pointerup", onPointerEnd);
+  dragHandle.addEventListener("pointercancel", onPointerEnd);
+
+  window.addEventListener("resize", () => {
+    if (!state.minimized || header.classList.contains("transitioning")) {
+      return;
+    }
+    const { left, top } = clampPosition(state.lastLeft, state.lastTop);
+    state.lastLeft = left;
+    state.lastTop = top;
+    applyPosition(left, top);
+  });
+});

package/server/public/style.css

@@ -2482,3 +2482,85 @@ body.dark #dropdown-portal .dropdown-content .btn2 {
   border-radius: 10px;
   background: white;
 }
+
+
+header.navheader.minimized {
+  position: fixed;
+  right: auto;
+  bottom: auto;
+  width: auto;
+  height: auto;
+  max-height: none;
+  padding: 4px 8px;
+  border-radius: 12px;
+  background: var(--light-nav-bg);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
+  display: inline-flex;
+  align-items: center;
+  overflow: visible;
+  z-index: 1000000;
+}
+body.dark header.navheader.minimized {
+  background: var(--dark-nav-bg);
+  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 1px rgba(255, 255, 255, 0.15);
+}
+header.navheader.minimized h1 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  height: auto;
+  overflow: visible;
+}
+header.navheader.minimized h1 > *:not(.home):not(.header-drag-handle) {
+  display: none !important;
+}
+header.navheader .header-drag-handle {
+  display: none;
+  position: relative;
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+}
+header.navheader .header-drag-handle::before {
+  content: "";
+  display: block;
+  width: 6px;
+  height: 18px;
+  border-radius: 3px;
+  opacity: 0.45;
+  background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0 1px, transparent 1px 4px);
+  transition: opacity 0.2s ease;
+}
+body.dark header.navheader .header-drag-handle::before {
+  background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 4px);
+  opacity: 0.35;
+}
+header.navheader.minimized .header-drag-handle {
+  display: block;
+}
+header.navheader.minimized:hover .header-drag-handle::before {
+  opacity: 0.7;
+}
+header.navheader.minimized .header-drag-handle.dragging {
+  cursor: grabbing;
+}
+header.navheader.minimized .header-drag-handle.dragging::before {
+  opacity: 0.85;
+}
+header.navheader.minimized .home {
+  display: flex;
+  align-items: center;
+  position: static;
+  padding: 0;
+}
+header.navheader.minimized .home .icon {
+  width: 24px;
+  height: 24px;
+}
+
+
+header.navheader.transitioning {
+  pointer-events: none;
+}

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);
@@ -404,6 +418,9 @@ body.dark .appcanvas > aside .header-item.selected {
   border-bottom: none;
   z-index: 1;
 }
+header.navheader.minimized + .appcanvas > aside .menu-container {
+  padding: 8px 0 0;
+}
 
 main {
   flex-grow: 1;
@@ -2723,6 +2740,9 @@ body.dark {
   .appcanvas {
     margin-left: 55px;
   }
+  header.navheader.minimized + .appcanvas {
+    margin-left: 0;
+  }
   main, iframe.mainframe {
     padding-left: 0;
   }
@@ -2822,6 +2842,9 @@ body.dark {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>
@@ -8545,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

@@ -205,6 +205,9 @@ pre {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/connect.ejs

@@ -830,6 +830,9 @@ document.addEventListener('DOMContentLoaded', function() {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/container.ejs

@@ -344,6 +344,9 @@ iframe {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/download.ejs

@@ -133,6 +133,9 @@ body.frozen {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/explore.ejs

@@ -134,6 +134,9 @@ body main iframe {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/form.ejs

@@ -167,6 +167,9 @@ document.addEventListener("DOMContentLoaded", async () => {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/frame.ejs

@@ -63,6 +63,9 @@ main iframe {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/github.ejs

@@ -246,6 +246,9 @@ ol {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/help.ejs

@@ -267,6 +267,9 @@ body.dark .item .tile .badge {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/index.ejs

@@ -435,6 +435,9 @@ body.dark aside .current.selected {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/index2.ejs

@@ -272,6 +272,9 @@ body.dark .open-menu, body.dark .browse {
     <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>
     <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-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

@@ -1532,6 +1532,9 @@ body.dark .ace-editor {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/mini.ejs

@@ -767,6 +767,9 @@ body.dark .appcanvas {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/net.ejs

@@ -553,6 +553,9 @@ document.addEventListener('DOMContentLoaded', function() {
     <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
       <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
     </a>
+    <button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+      <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>
     </button>

package/server/views/network.ejs

@@ -1066,6 +1066,9 @@ document.addEventListener('DOMContentLoaded', function() {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/network2.ejs

@@ -428,6 +428,9 @@ table h3 {
   <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>
   <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-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>
 </h1>

package/server/views/old_network.ejs

@@ -414,6 +414,9 @@ input:checked + .slider:before {
   <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>
   <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-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>
 </h1>

package/server/views/prototype/index.ejs

@@ -1014,6 +1014,9 @@ body.dark .appcanvas {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/review.ejs

@@ -954,6 +954,9 @@ body.dark .top-menu .btn2.selected {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/screenshots.ejs

@@ -726,6 +726,9 @@ document.addEventListener('DOMContentLoaded', function() {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/settings.ejs

@@ -398,6 +398,9 @@ document.addEventListener('DOMContentLoaded', function() {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/setup.ejs

@@ -144,6 +144,9 @@ body {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/setup_home.ejs

@@ -160,6 +160,9 @@ body.dark .card {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/terminals.ejs

@@ -381,6 +381,9 @@ body.dark .plugin-option:hover {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>

package/server/views/tools.ejs

@@ -1116,6 +1116,9 @@ document.addEventListener('DOMContentLoaded', function() {
 <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
   <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
 </a>
+<button class='btn2' id='minimize-header' data-tippy-content="minimize header" title='minimize header'>
+  <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>
 </button>