pinokiod 8.0.18 → 8.0.19

package/package.json

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

package/server/views/app.ejs

@@ -544,6 +544,7 @@ body.dark .snapshot-comment {
   color: royalblue;
 }
 #sidebar-toggle {
+  --sidebar-edge-hint-rgb: 37, 99, 235;
   color: #0f172a;
   position: relative;
   width: 40px;
@@ -554,6 +555,7 @@ body.dark .snapshot-comment {
   transition: background-color 140ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 140ms cubic-bezier(0.25, 1, 0.5, 1), color 140ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 body.dark #sidebar-toggle {
+  --sidebar-edge-hint-rgb: 96, 165, 250;
   color: rgba(248, 250, 252, 0.92);
 }
 #sidebar-toggle[aria-expanded="true"] {
@@ -570,6 +572,32 @@ body.dark #sidebar-toggle[aria-expanded="true"] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  transition: filter 140ms cubic-bezier(0.25, 1, 0.5, 1), transform 140ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+#sidebar-toggle.sidebar-edge-hint {
+  color: rgb(30, 64, 175);
+  background: rgba(var(--sidebar-edge-hint-rgb), 0.09);
+  box-shadow:
+    0 0 0 1px rgba(var(--sidebar-edge-hint-rgb), 0.42),
+    0 0 8px rgba(var(--sidebar-edge-hint-rgb), 0.28);
+}
+body.dark #sidebar-toggle.sidebar-edge-hint {
+  color: rgb(219, 234, 254);
+  background: rgba(var(--sidebar-edge-hint-rgb), 0.12);
+  box-shadow:
+    0 0 0 1px rgba(147, 197, 253, 0.55),
+    0 0 10px rgba(var(--sidebar-edge-hint-rgb), 0.38);
+}
+#sidebar-toggle.sidebar-edge-hint .sidebar-toggle-glyph {
+  transform: scale(1.03);
+  filter:
+    drop-shadow(0 0 1px rgba(var(--sidebar-edge-hint-rgb), 0.82))
+    drop-shadow(0 0 5px rgba(var(--sidebar-edge-hint-rgb), 0.55));
+}
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-toggle-glyph {
+    transition: none;
+  }
 }
 .sidebar-toggle-frame {
   position: relative;
@@ -2664,6 +2692,65 @@ body.dark .appcanvas.panel-open .menu-actions #ask-ai-tab.selected {
 body.dark .appcanvas.vertical .menu-actions {
   border-top: none;
 }
+.appcanvas.vertical .sidebar-hover-preference {
+  width: 100%;
+  padding-top: 5px;
+  border-top: 1px solid var(--pinokio-sidebar-separator);
+}
+.appcanvas.vertical .sidebar-hover-toggle,
+.appcanvas.vertical .sidebar-hover-toggle .tab {
+  width: 100%;
+}
+.sidebar-hover-switch {
+  display: inline-flex;
+  align-items: center;
+  width: 30px;
+  height: 16px;
+  margin-left: auto;
+  padding: 2px;
+  border: 1px solid rgba(100, 116, 139, 0.32);
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.24);
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  transition: background 140ms ease, border-color 140ms ease;
+}
+.sidebar-hover-switch-thumb {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgba(71, 85, 105, 0.82);
+  transform: translateX(0);
+  transition: transform 140ms cubic-bezier(0.25, 1, 0.5, 1), background 140ms ease;
+}
+.sidebar-hover-toggle[aria-checked="true"] .sidebar-hover-switch {
+  border-color: rgba(15, 23, 42, 0.68);
+  background: rgba(15, 23, 42, 0.82);
+}
+.sidebar-hover-toggle[aria-checked="true"] .sidebar-hover-switch-thumb {
+  background: rgba(248, 250, 252, 0.96);
+  transform: translateX(14px);
+}
+body.dark .sidebar-hover-switch {
+  border-color: rgba(148, 163, 184, 0.32);
+  background: rgba(148, 163, 184, 0.18);
+}
+body.dark .sidebar-hover-switch-thumb {
+  background: rgba(203, 213, 225, 0.76);
+}
+body.dark .sidebar-hover-toggle[aria-checked="true"] .sidebar-hover-switch {
+  border-color: rgba(226, 232, 240, 0.62);
+  background: rgba(226, 232, 240, 0.72);
+}
+body.dark .sidebar-hover-toggle[aria-checked="true"] .sidebar-hover-switch-thumb {
+  background: rgba(15, 23, 42, 0.9);
+}
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-hover-switch,
+  .sidebar-hover-switch-thumb {
+    transition: none;
+  }
+}
 .appcanvas.vertical > aside .menu-actions .header-item + .header-item {
   box-shadow: none !important;
 }
@@ -8346,6 +8433,17 @@ body.dark .pinokio-custom-terminal-header {
         <% if (type === 'browse') { %>
           <%- include('./partials/fs_status') %>
         <% } %>
+        <% if (type === 'run') { %>
+        <div class="sidebar-hover-preference">
+          <button type="button" class="btn header-item sidebar-hover-toggle" role="switch" aria-checked="true" data-app-sidebar-show-on-hover data-tippy-content="Show the sidebar when hovering over the left edge">
+            <div class="tab">
+              <i class="fa-solid fa-eye menu-action-leading-icon" aria-hidden="true"></i>
+              <div class="display">Show on hover</div>
+              <span class="sidebar-hover-switch" aria-hidden="true"><span class="sidebar-hover-switch-thumb"></span></span>
+            </div>
+          </button>
+        </div>
+        <% } %>
         <button type='button' id='logs-toggle' class="btn header-item" data-tippy-content="Get help with logs" aria-expanded="false" aria-controls="app-logs-drawer">
           <div class='tab'>
             <i class="fa-solid fa-circle-question menu-action-leading-icon"></i>
@@ -11463,7 +11561,7 @@ const rerenderMenuSection = (container, html) => {
         : "Protection beta is off for this app. You can change it later from the Run tab."
     })
   }
-  maybeShowProtectionInstallToast()
+  // maybeShowProtectionInstallToast()
   const buildPluginLaunchFromQuery = () => {
     try {
       const pageUrl = new URL(window.location.href)
@@ -16498,6 +16596,7 @@ const rerenderMenuSection = (container, html) => {
   const aside = document.getElementById("app-sidebar")
   const toggle = document.getElementById("sidebar-toggle")
   const peekTrigger = document.querySelector("[data-app-sidebar-peek-trigger]")
+  const showOnHoverToggle = document.querySelector("[data-app-sidebar-show-on-hover]")
   if (!appcanvas || !aside || !toggle) {
     if (toggle) {
       toggle.classList.add("hidden")
@@ -16509,6 +16608,21 @@ const rerenderMenuSection = (container, html) => {
   const storageKey = workspaceName
     ? `pinokio.sidebar-collapsed:${workspaceName}`
     : `pinokio.sidebar-collapsed:${location.pathname}`
+  const showOnHoverStorageKey = "pinokio.sidebar-show-on-hover"
+  const legacyAutoShowStorageKey = "pinokio.sidebar-auto-show"
+  let showOnHoverEnabled = true
+  try {
+    const storedShowOnHover = window.localStorage.getItem(showOnHoverStorageKey)
+    const storedPreference = storedShowOnHover === null
+      ? window.localStorage.getItem(legacyAutoShowStorageKey)
+      : storedShowOnHover
+    showOnHoverEnabled = storedPreference !== "0"
+  } catch (_) {}
+
+  const syncShowOnHoverToggle = () => {
+    if (!showOnHoverToggle) return
+    showOnHoverToggle.setAttribute("aria-checked", showOnHoverEnabled ? "true" : "false")
+  }
 
   const updateToggle = (collapsed) => {
     const expanded = !collapsed
@@ -16524,20 +16638,10 @@ const rerenderMenuSection = (container, html) => {
   }
 
   const desktopPeekMq = window.matchMedia("(min-width: 769px) and (hover: hover) and (pointer: fine)")
-  const shouldAutoPeekOnIdle = <%- JSON.stringify(type === "run") %>
   let peekCloseTimer = 0
 
   const isCollapsed = () => appcanvas.classList.contains("sidebar-collapsed")
   const isPeeking = () => appcanvas.classList.contains("sidebar-peeking")
-  const hasVisibleBrowserSurface = () => {
-    const browserview = document.querySelector("main.browserview")
-    if (!browserview) return false
-    if (browserview.querySelector("iframe:not(.hidden)")) return true
-    const networkStatus = document.getElementById("browserview-network-status")
-    if (networkStatus && !networkStatus.hidden) return true
-    const launchStatus = document.querySelector("[data-launch-requirements-status]")
-    return Boolean(launchStatus && !launchStatus.hidden)
-  }
   const syncSidebarVisibility = () => {
     const peeking = isPeeking()
     aside.setAttribute("aria-hidden", isCollapsed() && !peeking ? "true" : "false")
@@ -16549,9 +16653,24 @@ const rerenderMenuSection = (container, html) => {
   const setPeeking = (peeking) => {
     const next = !!peeking && canPeek()
     window.clearTimeout(peekCloseTimer)
+    if (next) {
+      toggle.classList.remove("sidebar-edge-hint")
+    }
     appcanvas.classList.toggle("sidebar-peeking", next)
     syncSidebarVisibility()
   }
+  const setShowOnHoverEnabled = (enabled, options = {}) => {
+    showOnHoverEnabled = !!enabled
+    syncShowOnHoverToggle()
+    if (showOnHoverEnabled) {
+      toggle.classList.remove("sidebar-edge-hint")
+    }
+    if (options.persist !== false) {
+      try {
+        window.localStorage.setItem(showOnHoverStorageKey, showOnHoverEnabled ? "1" : "0")
+      } catch (_) {}
+    }
+  }
   const shouldKeepPeekOpen = () => {
     const active = document.activeElement
     return (
@@ -16592,13 +16711,9 @@ const rerenderMenuSection = (container, html) => {
     initialCollapsed = window.localStorage.getItem(storageKey) === "1"
   } catch (_) {}
   setCollapsed(initialCollapsed, { persist: false })
+  syncShowOnHoverToggle()
   requestAnimationFrame(() => {
     appcanvas.classList.add("sidebar-motion-ready")
-    requestAnimationFrame(() => {
-      if (shouldAutoPeekOnIdle && initialCollapsed && !hasVisibleBrowserSurface()) {
-        setPeeking(true)
-      }
-    })
   })
 
   toggle.addEventListener("click", (event) => {
@@ -16606,11 +16721,28 @@ const rerenderMenuSection = (container, html) => {
     setCollapsed(!appcanvas.classList.contains("sidebar-collapsed"))
   })
 
+  if (showOnHoverToggle) {
+    showOnHoverToggle.addEventListener("click", (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      setShowOnHoverEnabled(!showOnHoverEnabled)
+    })
+  }
+
   if (peekTrigger) {
-    peekTrigger.addEventListener("pointerenter", () => setPeeking(true))
+    peekTrigger.addEventListener("pointerenter", () => {
+      if (showOnHoverEnabled) {
+        setPeeking(true)
+      } else {
+        toggle.classList.add("sidebar-edge-hint")
+      }
+    })
     peekTrigger.addEventListener("focus", () => setPeeking(true))
     peekTrigger.addEventListener("click", () => setPeeking(true))
-    peekTrigger.addEventListener("pointerleave", closePeekSoon)
+    peekTrigger.addEventListener("pointerleave", () => {
+      toggle.classList.remove("sidebar-edge-hint")
+      closePeekSoon()
+    })
     peekTrigger.addEventListener("blur", closePeekSoon)
     aside.addEventListener("pointerenter", () => {
       if (isPeeking()) {
@@ -16659,8 +16791,10 @@ const rerenderMenuSection = (container, html) => {
   window.PinokioSidebar = {
     setCollapsed,
     setPeeking,
+    setShowOnHoverEnabled,
     isCollapsed,
-    isPeeking
+    isPeeking,
+    isShowOnHoverEnabled: () => showOnHoverEnabled
   }
 })()
 </script>

package/server/views/partials/home_server_popover.ejs

@@ -16,6 +16,8 @@
     </span>
   </button>
   <div class="home-server-popover__panel" data-home-server-panel role="dialog" aria-label="Home Server" hidden>
-    <div class="home-server-popover__loading">Checking Home Server...</div>
+    <div data-home-server-content>
+      <div class="home-server-popover__loading">Checking Home Server...</div>
+    </div>
   </div>
 </div>

package/server/views/partials/home_server_popover_assets.ejs

@@ -642,8 +642,10 @@ body.dark .home-server-popover__qr-close:focus-visible {
   root.dataset.homeServerReady = "1"
   const trigger = root.querySelector("[data-home-server-trigger]")
   const panel = root.querySelector("[data-home-server-panel]")
+  const panelContent = root.querySelector("[data-home-server-content]")
   let payload = null
   let pollTimer = null
+  let qrReturnUrl = ""
   const setTriggerHintEnabled = (enabled) => {
     if (!trigger) {
       return
@@ -699,11 +701,12 @@ body.dark .home-server-popover__qr-close:focus-visible {
       existing.remove()
     }
   }
-  const showQrPreview = (url, sourceButton = null) => {
+  const showQrPreview = (url) => {
     if (!panel || !url) {
       return
     }
     removeQrPreview()
+    qrReturnUrl = url
     const safeUrl = escapeHtml(url)
     const qrUrl = `/qr?data=${encodeURIComponent(url)}&s=7&m=0`
     panel.insertAdjacentHTML("beforeend", `
@@ -719,11 +722,6 @@ body.dark .home-server-popover__qr-close:focus-visible {
         </div>
         <div class="home-server-popover__qr-url" title="${safeUrl}">${safeUrl}</div>
       </div>`)
-    const preview = panel.querySelector("[data-home-server-qr-preview]")
-    if (preview && sourceButton) {
-      preview.dataset.returnFocus = "true"
-      root._homeServerQrReturnFocus = sourceButton
-    }
     const closeButton = panel.querySelector("[data-home-server-qr-close]")
     if (closeButton && typeof closeButton.focus === "function") {
       closeButton.focus()
@@ -1002,19 +1000,18 @@ body.dark .home-server-popover__qr-close:focus-visible {
     document.dispatchEvent(new CustomEvent("pinokio:home-server-status", {
       detail: { status, payload: data || { status } }
     }))
-    if (!panel) {
+    if (!panelContent) {
       return
     }
     if (status === "on") {
-      panel.innerHTML = renderOn(data)
+      panelContent.innerHTML = renderOn(data)
     } else if (status === "starting") {
-      panel.innerHTML = renderStarting(data)
+      panelContent.innerHTML = renderStarting(data)
     } else if (status === "setup") {
-      panel.innerHTML = renderSetup(data)
+      panelContent.innerHTML = renderSetup(data)
     } else {
-      panel.innerHTML = renderOff(data)
+      panelContent.innerHTML = renderOff(data)
     }
-    root._homeServerQrReturnFocus = null
   }
   const fetchState = async () => {
     const response = await fetch("/info/home-server", { cache: "no-store" })
@@ -1072,7 +1069,7 @@ body.dark .home-server-popover__qr-close:focus-visible {
         if (attempts >= 60) {
           stopPolling()
           setStatus("error")
-          panel.innerHTML = renderError()
+          panelContent.innerHTML = renderError()
         }
       }
     }, 1500)
@@ -1111,11 +1108,11 @@ body.dark .home-server-popover__qr-close:focus-visible {
       }
     } catch (err) {
       setStatus("error")
-      panel.innerHTML = renderError(err && err.message ? err.message : "")
+      panelContent.innerHTML = renderError(err && err.message ? err.message : "")
     }
   }
   const openPanel = async () => {
-    if (!panel || !trigger) {
+    if (!panel || !panelContent || !trigger) {
       return
     }
     panel.hidden = false
@@ -1123,14 +1120,14 @@ body.dark .home-server-popover__qr-close:focus-visible {
     trigger.setAttribute("aria-expanded", "true")
     setTriggerHintEnabled(false)
     if (!payload) {
-      panel.innerHTML = `<div class="home-server-popover__loading">Checking Home Server...</div>`
+      panelContent.innerHTML = `<div class="home-server-popover__loading">Checking Home Server...</div>`
     }
     try {
       await fetchState()
       refreshPolling(payload)
     } catch (err) {
       setStatus("error")
-      panel.innerHTML = renderError(err && err.message ? err.message : "")
+      panelContent.innerHTML = renderError(err && err.message ? err.message : "")
     }
   }
   const closePanel = () => {
@@ -1139,7 +1136,7 @@ body.dark .home-server-popover__qr-close:focus-visible {
     }
     panel.hidden = true
     removeQrPreview()
-    root._homeServerQrReturnFocus = null
+    qrReturnUrl = ""
     root.dataset.homeServerOpen = "false"
     trigger.setAttribute("aria-expanded", "false")
     setTriggerHintEnabled(true)
@@ -1192,17 +1189,22 @@ body.dark .home-server-popover__qr-close:focus-visible {
     if (qrButton) {
       event.preventDefault()
       event.stopPropagation()
-      showQrPreview(qrButton.getAttribute("data-home-server-qr") || "", qrButton)
+      showQrPreview(qrButton.getAttribute("data-home-server-qr") || "")
       return
     }
     const qrCloseButton = event.target.closest("[data-home-server-qr-close]")
     if (qrCloseButton) {
       event.preventDefault()
       event.stopPropagation()
+      const returnUrl = qrReturnUrl
       removeQrPreview()
-      const focusTarget = root._homeServerQrReturnFocus
-      root._homeServerQrReturnFocus = null
-      if (focusTarget && typeof focusTarget.focus === "function" && document.contains(focusTarget)) {
+      qrReturnUrl = ""
+      const focusTarget = panelContent
+        ? Array.from(panelContent.querySelectorAll("[data-home-server-qr]")).find((button) => {
+            return button.getAttribute("data-home-server-qr") === returnUrl
+          })
+        : null
+      if (focusTarget && typeof focusTarget.focus === "function") {
         focusTarget.focus()
       }
       return

package/test/home-server-popover-ui.test.js

@@ -0,0 +1,109 @@
+const assert = require("node:assert/strict")
+const fs = require("node:fs/promises")
+const path = require("node:path")
+const test = require("node:test")
+const { JSDOM, VirtualConsole } = require("jsdom")
+
+const root = path.resolve(__dirname, "..")
+const popoverPath = path.join(root, "server/views/partials/home_server_popover.ejs")
+const assetsPath = path.join(root, "server/views/partials/home_server_popover_assets.ejs")
+
+async function waitFor(predicate, message) {
+  const deadline = Date.now() + 1000
+  while (Date.now() < deadline) {
+    if (predicate()) return
+    await new Promise((resolve) => setTimeout(resolve, 5))
+  }
+  assert.fail(`Timed out waiting for ${message}`)
+}
+
+async function createHarness() {
+  const [popover, assets] = await Promise.all([
+    fs.readFile(popoverPath, "utf8"),
+    fs.readFile(assetsPath, "utf8")
+  ])
+  const scriptStart = assets.indexOf("<script>")
+  const scriptEnd = assets.lastIndexOf("</script>")
+  assert.notEqual(scriptStart, -1)
+  assert.notEqual(scriptEnd, -1)
+  const script = assets.slice(scriptStart + "<script>".length, scriptEnd)
+
+  const state = {
+    interval: null,
+    payload: {
+      status: "on",
+      apps: [{
+        id: "maestro",
+        name: "Maestro",
+        url: "",
+        state: "starting"
+      }],
+      routes: [{
+        name: "Syncthing",
+        url: "http://192.168.1.10:42006"
+      }]
+    }
+  }
+
+  const virtualConsole = new VirtualConsole()
+  virtualConsole.on("jsdomError", (error) => {
+    throw error
+  })
+
+  const dom = new JSDOM(`<!doctype html><body>${popover}<script>${script}</script></body>`, {
+    url: "http://127.0.0.1:42000/",
+    runScripts: "dangerously",
+    pretendToBeVisual: true,
+    virtualConsole,
+    beforeParse(window) {
+      window.fetch = async () => ({
+        ok: true,
+        json: async () => JSON.parse(JSON.stringify(state.payload))
+      })
+      window.setInterval = (callback, delay) => {
+        state.interval = { callback, delay }
+        return 1
+      }
+      window.clearInterval = () => {
+        state.interval = null
+      }
+    }
+  })
+
+  await waitFor(
+    () => dom.window.document.querySelector('[data-home-server-qr="http://192.168.1.10:42006"]'),
+    "initial Home Server content"
+  )
+
+  return { dom, state }
+}
+
+test("Home Server polling refreshes content without closing an open QR preview", async (t) => {
+  const { dom, state } = await createHarness()
+  t.after(() => dom.window.close())
+  const { document } = dom.window
+  const panel = document.querySelector("[data-home-server-panel]")
+  const panelContent = document.querySelector("[data-home-server-content]")
+  const trigger = document.querySelector("[data-home-server-trigger]")
+
+  trigger.click()
+  await waitFor(() => state.interval, "Home Server polling")
+
+  const qrButton = panelContent.querySelector('[data-home-server-qr="http://192.168.1.10:42006"]')
+  qrButton.click()
+  const preview = panel.querySelector("[data-home-server-qr-preview]")
+  assert.ok(preview)
+  assert.equal(document.activeElement, preview.querySelector("[data-home-server-qr-close]"))
+
+  state.payload.routes[0].name = "Syncthing refreshed"
+  await state.interval.callback()
+
+  assert.equal(panel.querySelector("[data-home-server-qr-preview]"), preview)
+  assert.equal(qrButton.isConnected, false)
+  assert.match(panelContent.textContent, /Syncthing refreshed/)
+
+  preview.querySelector("[data-home-server-qr-close]").click()
+  const refreshedQrButton = panelContent.querySelector('[data-home-server-qr="http://192.168.1.10:42006"]')
+  assert.equal(panel.querySelector("[data-home-server-qr-preview]"), null)
+  assert.equal(document.activeElement, refreshedQrButton)
+})

package/test/launch-settings-ui.test.js

@@ -856,17 +856,21 @@ test("static guard: open without launching disables page-load script frame selec
   assert.match(appView, /if \(!target && !automaticSelectionDisabled && preselected && preselected !== devTab\)/)
 })
 
-test("static guard: collapsed idle run page peeks without persisting sidebar state", async () => {
+test("static guard: collapsed app sidebar exposes a hover preference", async () => {
   const appView = await fs.readFile(path.resolve(root, "server/views/app.ejs"), "utf8")
 
-  assert.match(appView, /const shouldAutoPeekOnIdle = <%- JSON\.stringify\(type === "run"\) %>/)
-  assert.match(appView, /const hasVisibleBrowserSurface = \(\) => \{[\s\S]*browserview\.querySelector\("iframe:not\(\.hidden\)"\)[\s\S]*browserview-network-status[\s\S]*data-launch-requirements-status/)
-  assert.match(appView, /if \(shouldAutoPeekOnIdle && initialCollapsed && !hasVisibleBrowserSurface\(\)\) \{[\s\S]*setPeeking\(true\)/)
+  assert.match(appView, /data-app-sidebar-show-on-hover/)
+  assert.match(appView, />Show on hover</)
+  assert.match(appView, /Show the sidebar when hovering over the left edge/)
+  assert.match(appView, /#sidebar-toggle\.sidebar-edge-hint \.sidebar-toggle-glyph/)
+  assert.match(appView, /peekTrigger\.addEventListener\("pointerenter", \(\) => \{[\s\S]*if \(showOnHoverEnabled\) \{[\s\S]*setPeeking\(true\)[\s\S]*\} else \{[\s\S]*toggle\.classList\.add\("sidebar-edge-hint"\)/)
+  assert.match(appView, /peekTrigger\.addEventListener\("pointerleave", \(\) => \{[\s\S]*toggle\.classList\.remove\("sidebar-edge-hint"\)[\s\S]*closePeekSoon\(\)/)
+  assert.doesNotMatch(appView, /shouldAutoShowOnEmptyRunView|hasVisibleBrowserSurface/)
   assert.match(appView, /setCollapsed\(initialCollapsed, \{ persist: false \}\)/)
   assert.match(appView, /aside\.addEventListener\("click", \(event\) => \{[\s\S]*target\.closest\("\.reveal, \.revealer, \[data-app-autolaunch-button\]"\)[\s\S]*window\.setTimeout\(\(\) => setPeeking\(false\), 0\)/)
 })
 
-test("app sidebar auto-peeks on collapsed idle run page and dismisses after click", async () => {
+test("app sidebar hover preference gates hover without closing the active peek", async () => {
   const appView = await fs.readFile(path.resolve(root, "server/views/app.ejs"), "utf8")
   const start = appView.indexOf('<script>\n(() => {\n  const appcanvas = document.querySelector(".appcanvas")')
   const end = appView.indexOf('</script>\n<script src="/tab-idle-notifier.js"></script>', start)
@@ -876,23 +880,20 @@ test("app sidebar auto-peeks on collapsed idle run page and dismisses after clic
   const sidebarScript = appView
     .slice(start + "<script>\n".length, end)
     .replace(/<%- JSON\.stringify\(typeof name === "string" \? name : ""\) %>/g, '"test-app"')
-    .replace(/<%- JSON\.stringify\(type === "run"\) %>/g, "true")
 
-  const createDom = (browserSurface = "") => {
+  const createDom = () => {
     return new JSDOM(`<!doctype html>
       <button id="sidebar-toggle"></button>
       <div class="appcanvas vertical">
         <button type="button" data-app-sidebar-peek-trigger></button>
         <aside id="app-sidebar">
+          <button type="button" role="switch" aria-checked="true" data-app-sidebar-show-on-hover>Show on hover</button>
           <button type="button" class="reveal" id="sidebar-reveal">Downloads</button>
           <button type="button" class="revealer" id="sidebar-revealer">Changes</button>
           <button type="button" data-app-autolaunch-button id="sidebar-autolaunch">Autolaunch</button>
           <button type="button" id="sidebar-action">Start</button>
         </aside>
-        <main class="browserview">${browserSurface}</main>
-      </div>
-      <div id="browserview-network-status" hidden></div>
-      <div data-launch-requirements-status hidden></div>`, {
+      </div>`, {
       url: "http://127.0.0.1:42000/v/test-app",
       runScripts: "outside-only",
       pretendToBeVisual: true,
@@ -908,6 +909,8 @@ test("app sidebar auto-peeks on collapsed idle run page and dismisses after clic
 
   const wait = (ms = 75) => new Promise((resolve) => setTimeout(resolve, ms))
   const storageKey = "pinokio.sidebar-collapsed:test-app"
+  const showOnHoverStorageKey = "pinokio.sidebar-show-on-hover"
+  const legacyAutoShowStorageKey = "pinokio.sidebar-auto-show"
 
   const dom = createDom()
   dom.window.localStorage.setItem(storageKey, "1")
@@ -916,10 +919,17 @@ test("app sidebar auto-peeks on collapsed idle run page and dismisses after clic
 
   const appcanvas = dom.window.document.querySelector(".appcanvas")
   const aside = dom.window.document.getElementById("app-sidebar")
+  const peekTrigger = dom.window.document.querySelector("[data-app-sidebar-peek-trigger]")
+  const sidebarToggle = dom.window.document.getElementById("sidebar-toggle")
   assert.equal(appcanvas.classList.contains("sidebar-collapsed"), true)
+  assert.equal(appcanvas.classList.contains("sidebar-peeking"), false)
+  assert.equal(aside.getAttribute("aria-hidden"), "true")
+  assert.equal(dom.window.localStorage.getItem(storageKey), "1")
+
+  peekTrigger.dispatchEvent(new dom.window.Event("pointerenter"))
   assert.equal(appcanvas.classList.contains("sidebar-peeking"), true)
+  assert.equal(sidebarToggle.classList.contains("sidebar-edge-hint"), false)
   assert.equal(aside.getAttribute("aria-hidden"), "false")
-  assert.equal(dom.window.localStorage.getItem(storageKey), "1")
 
   aside.querySelector("#sidebar-reveal").dispatchEvent(new dom.window.MouseEvent("click", { bubbles: true }))
   await wait(5)
@@ -940,15 +950,38 @@ test("app sidebar auto-peeks on collapsed idle run page and dismisses after clic
   assert.equal(appcanvas.classList.contains("sidebar-peeking"), false)
   assert.equal(dom.window.localStorage.getItem(storageKey), "1")
 
-  const activeDom = createDom('<iframe src="about:blank"></iframe>')
-  activeDom.window.localStorage.setItem(storageKey, "1")
-  activeDom.window.eval(sidebarScript)
+  const disabledDom = createDom()
+  disabledDom.window.localStorage.setItem(storageKey, "1")
+  disabledDom.window.localStorage.setItem(legacyAutoShowStorageKey, "0")
+  disabledDom.window.eval(sidebarScript)
   await wait()
 
-  const activeCanvas = activeDom.window.document.querySelector(".appcanvas")
-  assert.equal(activeCanvas.classList.contains("sidebar-collapsed"), true)
-  assert.equal(activeCanvas.classList.contains("sidebar-peeking"), false)
-  assert.equal(activeDom.window.localStorage.getItem(storageKey), "1")
+  const disabledCanvas = disabledDom.window.document.querySelector(".appcanvas")
+  const disabledPeekTrigger = disabledDom.window.document.querySelector("[data-app-sidebar-peek-trigger]")
+  const showOnHoverToggle = disabledDom.window.document.querySelector("[data-app-sidebar-show-on-hover]")
+  const disabledSidebarToggle = disabledDom.window.document.getElementById("sidebar-toggle")
+  assert.equal(disabledCanvas.classList.contains("sidebar-collapsed"), true)
+  assert.equal(disabledCanvas.classList.contains("sidebar-peeking"), false)
+  assert.equal(showOnHoverToggle.getAttribute("aria-checked"), "false")
+
+  disabledPeekTrigger.dispatchEvent(new disabledDom.window.Event("pointerenter"))
+  assert.equal(disabledCanvas.classList.contains("sidebar-peeking"), false)
+  assert.equal(disabledSidebarToggle.classList.contains("sidebar-edge-hint"), true)
+
+  disabledPeekTrigger.dispatchEvent(new disabledDom.window.Event("pointerleave"))
+  assert.equal(disabledSidebarToggle.classList.contains("sidebar-edge-hint"), false)
+
+  disabledPeekTrigger.click()
+  assert.equal(disabledCanvas.classList.contains("sidebar-peeking"), true)
+  assert.equal(disabledSidebarToggle.classList.contains("sidebar-edge-hint"), false)
+  showOnHoverToggle.click()
+  assert.equal(showOnHoverToggle.getAttribute("aria-checked"), "true")
+  assert.equal(disabledDom.window.localStorage.getItem(showOnHoverStorageKey), "1")
+
+  showOnHoverToggle.click()
+  assert.equal(showOnHoverToggle.getAttribute("aria-checked"), "false")
+  assert.equal(disabledDom.window.localStorage.getItem(showOnHoverStorageKey), "0")
+  assert.equal(disabledCanvas.classList.contains("sidebar-peeking"), true)
 })
 
 test("app identity popover exposes launcher metadata and remote browser link", async () => {