pinokiod 3.180.0 → 3.181.0

package/server/public/nav.js

@@ -1,4 +1,8 @@
 document.addEventListener("DOMContentLoaded", () => {
+  // Logging disabled for production
+  const log = () => {};
+  const rectInfo = () => null;
+
   const newWindowButton = document.querySelector("#new-window");
   if (newWindowButton) {
     newWindowButton.addEventListener("click", (event) => {
@@ -14,10 +18,70 @@ document.addEventListener("DOMContentLoaded", () => {
   const header = document.querySelector("header.navheader");
   const minimizeButton = document.querySelector("#minimize-header");
   const homeLink = header ? header.querySelector(".home") : null;
-  if (!header || !minimizeButton || !homeLink) {
+  log("init:elements", { hasHeader: !!header, hasMinimize: !!minimizeButton, hasHome: !!homeLink });
+  // Only require the header; other controls may be missing on some views
+  if (!header) {
+    log("init:abort:no-header", {});
     return;
   }
 
+  // Helper functions used during initial restore must be defined before use
+  const MIN_MARGIN = 8;
+
+  function clampPosition(left, top, sizeOverride) {
+    const rect = header.getBoundingClientRect();
+    const width = sizeOverride && Number.isFinite(sizeOverride.width) ? sizeOverride.width : rect.width;
+    const height = sizeOverride && Number.isFinite(sizeOverride.height) ? sizeOverride.height : rect.height;
+    const maxLeft = Math.max(0, window.innerWidth - width);
+    const maxTop = Math.max(0, window.innerHeight - height);
+    return {
+      left: Math.min(Math.max(0, left), maxLeft),
+      top: Math.min(Math.max(0, top), maxTop),
+    };
+  }
+
+  function applyPosition(left, top) {
+    header.style.left = `${left}px`;
+    header.style.top = `${top}px`;
+    header.style.right = "auto";
+    header.style.bottom = "auto";
+    log("pos:apply", { left, top });
+  }
+
+  function measureRect(configureClone) {
+    const clone = header.cloneNode(true);
+    // Avoid duplicate-IDs while preserving #refresh-page so measurement matches visible controls
+    clone.querySelectorAll("[id]").forEach((node) => {
+      if (node.id !== "refresh-page") {
+        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();
+    log("measure", { minimized: !!clone.classList.contains("minimized"), rect: rectInfo(rect) });
+    clone.remove();
+    return rect;
+  }
+
   const dispatchHeaderState = (minimized, detail = {}) => {
     if (typeof window === "undefined" || typeof window.CustomEvent !== "function") {
       return;
@@ -36,8 +100,49 @@ document.addEventListener("DOMContentLoaded", () => {
     dragHandle.setAttribute("aria-hidden", "true");
     dragHandle.setAttribute("title", "Drag minimized header");
     headerTitle.insertBefore(dragHandle, homeLink ? homeLink.nextSibling : headerTitle.firstChild);
+    log("init:drag-handle:created", {});
   }
 
+  const STORAGE_KEY = () => `pinokio:header-state:v1:${location.pathname}`;
+  const RESTORE_ONCE_KEY = () => `pinokio:header-restore-once:${location.pathname}`;
+  const storage = (() => {
+    try { return window.sessionStorage; } catch (_) { return null; }
+  })();
+  const readPersisted = () => {
+    if (!storage) return null;
+    try {
+      const raw = storage.getItem(STORAGE_KEY());
+      if (!raw) return null;
+      const data = JSON.parse(raw);
+      if (!data || typeof data !== "object") return null;
+      const left = Number.isFinite(data.left) ? data.left : null;
+      const top = Number.isFinite(data.top) ? data.top : null;
+      const minimized = !!data.minimized;
+      const out = { minimized, left, top };
+      log("storage:read", { key: STORAGE_KEY(), value: out });
+      return out;
+    } catch (_) {
+      return null;
+    }
+  };
+  const writePersisted = (data) => {
+    if (!storage) return;
+    try {
+      const prev = readPersisted() || {};
+      const next = { ...prev, ...data };
+      storage.setItem(STORAGE_KEY(), JSON.stringify(next));
+      log("storage:write", { key: STORAGE_KEY(), value: next });
+    } catch (_) {}
+  };
+  const readRestoreOnce = () => {
+    if (!storage) return false;
+    try {
+      const raw = storage.getItem(RESTORE_ONCE_KEY());
+      storage.removeItem(RESTORE_ONCE_KEY());
+      return raw === "1";
+    } catch (_) { return false; }
+  };
+
   const state = {
     minimized: header.classList.contains("minimized"),
     pointerId: null,
@@ -54,27 +159,42 @@ document.addEventListener("DOMContentLoaded", () => {
     },
     transitionHandler: null,
   };
+  log("init:state", {
+    minimizedClass: header.classList.contains("minimized"),
+    style: { left: header.style.left, top: header.style.top, right: header.style.right, bottom: header.style.bottom },
+    rect: rectInfo(header.getBoundingClientRect())
+  });
 
-  dispatchHeaderState(state.minimized, { phase: "init" });
-
-  const MIN_MARGIN = 8;
+  // Restore persisted or respect DOM state on load (per path, per session)
+  const persisted = readPersisted();
+  const restoreFromStorage = !!(persisted && persisted.minimized);
+  const domIsMinimized = header.classList.contains("minimized");
+  if (restoreFromStorage || domIsMinimized) {
+    header.classList.add("minimized");
+    // Use minimized size for clamping/positioning
+    const size = measureRect((clone) => { clone.classList.add("minimized"); });
+    const fallbackLeft = Math.max(MIN_MARGIN, window.innerWidth - size.width - MIN_MARGIN);
+    const fallbackTop = Math.max(MIN_MARGIN, window.innerHeight - size.height - MIN_MARGIN);
+    const left = restoreFromStorage && Number.isFinite(persisted.left) ? persisted.left : fallbackLeft;
+    const top = restoreFromStorage && Number.isFinite(persisted.top) ? persisted.top : fallbackTop;
+    const clamped = clampPosition(left, top, size);
+    state.lastLeft = clamped.left;
+    state.lastTop = clamped.top;
+    state.hasCustomPosition = restoreFromStorage;
+    state.minimized = true;
+    // Apply immediately and once after layout settles
+    applyPosition(clamped.left, clamped.top);
+    requestAnimationFrame(() => applyPosition(clamped.left, clamped.top));
+    log("init:restore", { restoreFromStorage, domIsMinimized, measured: { width: size.width, height: size.height }, fallback: { left: fallbackLeft, top: fallbackTop }, chosen: { left, top }, clamped });
+  } else {
+    // Leave DOM/styles as rendered (expanded)
+    state.minimized = false;
+    log("init:expanded", {});
+  }
 
-  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),
-    };
-  };
+  dispatchHeaderState(state.minimized, { phase: "init" });
 
-  const applyPosition = (left, top) => {
-    header.style.left = `${left}px`;
-    header.style.top = `${top}px`;
-    header.style.right = "auto";
-    header.style.bottom = "auto";
-  };
+  // MIN_MARGIN is already declared above
 
   const rememberOriginalPosition = () => {
     state.originalPosition = {
@@ -85,33 +205,7 @@ document.addEventListener("DOMContentLoaded", () => {
     };
   };
 
-  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;
-  };
+  // measureRect declared above for early use
 
   const stopTransition = () => {
     if (state.transitionHandler) {
@@ -124,6 +218,7 @@ document.addEventListener("DOMContentLoaded", () => {
     header.style.transformOrigin = "";
     header.style.opacity = "";
     header.style.willChange = "";
+    log("transition:stop", {});
   };
 
   const minimize = () => {
@@ -132,6 +227,7 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     rememberOriginalPosition();
+    log("minimize:start", { rect: rectInfo(header.getBoundingClientRect()), original: { ...state.originalPosition } });
 
     const firstRect = header.getBoundingClientRect();
     const minimizedSize = measureRect((clone) => {
@@ -143,13 +239,17 @@ document.addEventListener("DOMContentLoaded", () => {
     const targetLeft = state.hasCustomPosition ? state.lastLeft : defaultLeft;
     const targetTop = state.hasCustomPosition ? state.lastTop : defaultTop;
 
-    state.lastLeft = targetLeft;
-    state.lastTop = targetTop;
+    // Clamp final position using minimized size so it anchors bottom-right correctly
+    const clamped = clampPosition(targetLeft, targetTop, minimizedSize);
+    state.lastLeft = clamped.left;
+    state.lastTop = clamped.top;
+    log("minimize:computed", { minimizedSize, default: { left: defaultLeft, top: defaultTop }, target: { left: targetLeft, top: targetTop }, clamped });
 
     stopTransition();
 
     header.classList.add("minimized");
-    applyPosition(targetLeft, targetTop);
+    applyPosition(clamped.left, clamped.top);
+    writePersisted({ minimized: true, left: clamped.left, top: clamped.top });
 
     dispatchHeaderState(true, { phase: "start" });
 
@@ -169,6 +269,19 @@ document.addEventListener("DOMContentLoaded", () => {
     header.classList.add("transitioning");
     header.style.transition = "transform 520ms cubic-bezier(0.22, 1, 0.36, 1)";
     header.style.transform = "";
+    // Failsafe: clear transitioning if the event never fires
+    setTimeout(() => {
+      if (header.classList.contains("transitioning")) {
+        log("minimize:failsafe", {});
+        stopTransition();
+      }
+    }, 900);
+    // Failsafe: clear transitioning if the event never fires
+    setTimeout(() => {
+      if (header.classList.contains("transitioning")) {
+        stopTransition();
+      }
+    }, 900);
 
     state.transitionHandler = (event) => {
       if (event.propertyName !== "transform") {
@@ -178,18 +291,21 @@ document.addEventListener("DOMContentLoaded", () => {
       state.transitionHandler = null;
       stopTransition();
       state.minimized = true;
+      writePersisted({ minimized: true, left: state.lastLeft, top: state.lastTop });
       dispatchHeaderState(true, { phase: "settled" });
+      log("minimize:done", { lastLeft: state.lastLeft, lastTop: state.lastTop });
     };
 
     header.addEventListener("transitionend", state.transitionHandler);
   };
 
   const restore = () => {
-    if (!state.minimized || header.classList.contains("transitioning")) {
+    if (!header.classList.contains("minimized") || header.classList.contains("transitioning")) {
       return;
     }
 
     const firstRect = header.getBoundingClientRect();
+    log("restore:start", { rect: rectInfo(firstRect), original: { ...state.originalPosition } });
 
     stopTransition();
 
@@ -218,6 +334,19 @@ document.addEventListener("DOMContentLoaded", () => {
 
     header.style.transition = "transform 560ms cubic-bezier(0.18, 0.85, 0.4, 1)";
     header.style.transform = "";
+    // Failsafe: clear transitioning if the event never fires
+    setTimeout(() => {
+      if (header.classList.contains("transitioning")) {
+        log("restore:failsafe", {});
+        stopTransition();
+      }
+    }, 900);
+    // Failsafe: clear transitioning if the event never fires
+    setTimeout(() => {
+      if (header.classList.contains("transitioning")) {
+        stopTransition();
+      }
+    }, 900);
 
     state.transitionHandler = (event) => {
       if (event.propertyName !== "transform") {
@@ -230,27 +359,36 @@ document.addEventListener("DOMContentLoaded", () => {
       state.hasCustomPosition = false;
       state.lastLeft = parseFloat(header.style.left) || 0;
       state.lastTop = parseFloat(header.style.top) || 0;
+      writePersisted({ minimized: false, left: state.lastLeft, top: state.lastTop });
       dispatchHeaderState(false, { phase: "settled" });
+      log("restore:done", { left: state.lastLeft, top: state.lastTop });
     };
 
     header.addEventListener("transitionend", state.transitionHandler);
   };
 
-  minimizeButton.addEventListener("click", (event) => {
-    event.preventDefault();
-    minimize();
-  });
+  if (minimizeButton) {
+    minimizeButton.addEventListener("click", (event) => {
+      log("click:minimize", {});
+      event.preventDefault();
+      minimize();
+    });
+  }
 
-  homeLink.addEventListener("click", (event) => {
-    if (!state.minimized) {
-      return;
-    }
-    event.preventDefault();
-    restore();
-  });
+  if (homeLink) {
+    homeLink.addEventListener("click", (event) => {
+      const minimizedNow = header.classList.contains("minimized");
+      log("click:home", { minimizedNow });
+      if (!minimizedNow) {
+        return;
+      }
+      event.preventDefault();
+      restore();
+    });
+  }
 
   const onPointerDown = (event) => {
-    if (!state.minimized || header.classList.contains("transitioning")) {
+    if (!header.classList.contains("minimized") || header.classList.contains("transitioning")) {
       return;
     }
     state.pointerId = event.pointerId;
@@ -263,11 +401,13 @@ document.addEventListener("DOMContentLoaded", () => {
       } catch (error) {}
     }
     dragHandle.classList.add("dragging");
+    log("drag:start", { pointerId: state.pointerId, rect: rectInfo(rect), offsetX: Math.round(state.offsetX), offsetY: Math.round(state.offsetY) });
     event.preventDefault();
   };
 
+  let __lastPointerLog = 0;
   const onPointerMove = (event) => {
-    if (!state.minimized || state.pointerId !== event.pointerId) {
+    if (!header.classList.contains("minimized") || state.pointerId !== event.pointerId) {
       return;
     }
     const left = event.clientX - state.offsetX;
@@ -277,6 +417,12 @@ document.addEventListener("DOMContentLoaded", () => {
     state.lastTop = clamped.top;
     state.hasCustomPosition = true;
     applyPosition(clamped.left, clamped.top);
+    writePersisted({ minimized: true, left: clamped.left, top: clamped.top });
+    const t = Date.now();
+    if (t - __lastPointerLog > 150) {
+      __lastPointerLog = t;
+      log("drag:move", { left, top, clamped });
+    }
   };
 
   const onPointerEnd = (event) => {
@@ -289,6 +435,7 @@ document.addEventListener("DOMContentLoaded", () => {
       } catch (error) {}
     }
     dragHandle.classList.remove("dragging");
+    log("drag:end", { pointerId: event.pointerId, lastLeft: state.lastLeft, lastTop: state.lastTop });
     state.pointerId = null;
   };
 
@@ -296,14 +443,30 @@ document.addEventListener("DOMContentLoaded", () => {
   dragHandle.addEventListener("pointermove", onPointerMove);
   dragHandle.addEventListener("pointerup", onPointerEnd);
   dragHandle.addEventListener("pointercancel", onPointerEnd);
+  // Fallback: allow dragging by grabbing empty areas of the minimized header
+  const isInteractive = (el) => !!el.closest("a, button, [role='button'], input, select, textarea");
+  header.addEventListener("pointerdown", (event) => {
+    if (!header.classList.contains("minimized") || isInteractive(event.target) || event.target.closest(".header-drag-handle")) {
+      // Interactive controls and the dedicated drag handle use their own handlers
+      return;
+    }
+    log("drag:fallback:pointerdown", { target: event.target && (event.target.id || event.target.className || event.target.nodeName) });
+    onPointerDown(event);
+  });
+  header.addEventListener("pointermove", onPointerMove);
+  header.addEventListener("pointerup", onPointerEnd);
+  header.addEventListener("pointercancel", onPointerEnd);
 
   window.addEventListener("resize", () => {
-    if (!state.minimized || header.classList.contains("transitioning")) {
+    if (!header.classList.contains("minimized") || header.classList.contains("transitioning")) {
       return;
     }
+    const before = { left: state.lastLeft, top: state.lastTop };
     const { left, top } = clampPosition(state.lastLeft, state.lastTop);
     state.lastLeft = left;
     state.lastTop = top;
     applyPosition(left, top);
+    writePersisted({ minimized: state.minimized, left, top });
+    log("resize:clamp", { before, after: { left, top } });
   });
 });

package/server/public/style.css

@@ -2383,6 +2383,8 @@ body.dark .mode-selector .btn2.selected {
 
 
 @media only screen and (max-width: 768px) {
+  /* Hide QR block on small screens */
+  aside .qr { display: none !important; }
   body {
     display: flex;
     align-items: stretch;
@@ -2455,6 +2457,14 @@ body.dark .mode-selector .btn2.selected {
     overflow: auto;
     flex-wrap: nowrap;
   }
+  /* Keep minimized header horizontal on small screens */
+  header.navheader.minimized,
+  header.navheader.minimized h1 {
+    display: inline-flex;
+    flex-direction: row;
+  }
+  /* Avoid stretching buttons to full width inside minimized pill */
+  header.navheader.minimized h1 .btn2 { width: auto; }
   .mode-selector {
     flex-direction: column;
     padding: 0;
@@ -2539,8 +2549,18 @@ header.navheader.minimized h1 {
   padding: 0;
   height: auto;
   overflow: visible;
-}
-header.navheader.minimized h1 > *:not(.home):not(.header-drag-handle) {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+/* Ensure item order inside minimized pill: home, refresh, dragger */
+header.navheader.minimized h1 .home { order: 0; }
+header.navheader.minimized h1 #refresh-page { order: 1; }
+header.navheader.minimized h1 .header-drag-handle { order: 2; }
+/* Prevent items from stretching */
+header.navheader.minimized h1 > .home,
+header.navheader.minimized h1 > #refresh-page,
+header.navheader.minimized h1 > .header-drag-handle { flex: 0 0 auto; }
+header.navheader.minimized h1 > *:not(.home):not(.header-drag-handle):not(#refresh-page) {
   display: none !important;
 }
 header.navheader .header-drag-handle {

package/server/public/tab-idle-notifier.js

@@ -492,6 +492,9 @@ const ensureTabAccessories = aggregateDebounce(() => {
       message,
       timeout: 60,
       sound: true,
+      // Target this notification to this browser/device only
+      audience: 'device',
+      device_id: (typeof window !== 'undefined' && typeof window.PinokioGetDeviceId === 'function') ? window.PinokioGetDeviceId() : undefined,
     };
     if (image) {
       payload.image = image;

package/server/socket.js

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