pinokiod 7.5.51 → 7.5.53

package/package.json

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

package/server/public/style.css

@@ -1530,6 +1530,40 @@ body.main-sidebar-page aside.main-sidebar .tab.selected .main-sidebar-action-ico
   white-space: nowrap;
   word-wrap: normal !important;
 }
+.main-sidebar .main-sidebar-status-badge {
+  grid-column: 3;
+  justify-self: end;
+  min-width: 28px;
+  height: 15px;
+  padding: 0 5px;
+  box-sizing: border-box;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(15, 23, 42, 0.07);
+  color: rgba(31, 41, 55, 0.6);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+.main-sidebar .main-sidebar-status-badge[hidden] {
+  display: none !important;
+}
+.main-sidebar .main-sidebar-status-badge[data-state="on"] {
+  background: rgba(45, 180, 92, 0.14);
+  color: #247a43;
+}
+body.dark .main-sidebar .main-sidebar-status-badge {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(229, 231, 235, 0.68);
+}
+body.dark .main-sidebar .main-sidebar-status-badge[data-state="on"] {
+  background: rgba(74, 222, 128, 0.14);
+  color: #86efac;
+}
 .main-sidebar .tab.submenu {
   padding-left: 14px !important;
 }

package/server/views/app.ejs

@@ -85,7 +85,7 @@ body.app-page > header.navheader h1 > .home-server-popover {
 }
 .app-header-info {
   position: relative;
-  flex: 1 1 auto;
+  flex: 0 1 auto;
   min-width: 0;
   display: inline-flex;
   align-items: center;
@@ -100,8 +100,7 @@ body.app-page > header.navheader h1 > .home-server-popover {
   align-items: center;
   gap: 8px;
   min-width: 0;
-  width: 100%;
-  max-width: none;
+  max-width: min(260px, 32vw);
   height: 22px;
   padding: 0 4px;
   margin: 0 -4px;
@@ -325,11 +324,20 @@ body.app-page header.navheader .nav-labeled-action:focus-visible {
   color: var(--pinokio-sidebar-tab-active-color);
 }
 @media only screen and (max-width: 1180px) {
-  body.app-page header.navheader .app-header-identity-separator,
-  body.app-page header.navheader .resource-chip--cpu,
-  body.app-page header.navheader .resource-chip--ram,
-  body.app-page header.navheader .resource-chip--vram {
-    display: none !important;
+  body.app-page header.navheader .app-header-identity {
+    gap: 5px;
+    padding: 0 9px;
+    margin-right: 6px;
+  }
+  body.app-page header.navheader .app-header-info-trigger {
+    gap: 6px;
+  }
+  body.app-page header.navheader .resource-usage-trigger {
+    gap: 4px;
+    padding: 0 3px;
+  }
+  body.app-page header.navheader .resource-chip {
+    font-size: 10px;
   }
 }
 .resource-usage {
@@ -6884,10 +6892,10 @@ header.navheader h1 {
 	    min-width: 0;
 	    display: flex;
 	    align-items: center;
-	    justify-content: flex-start;
+	    justify-content: center;
 	    align-content: center;
 	    flex-wrap: wrap;
-	    gap: 2px 5px;
+	    gap: 2px 8px;
 	    min-height: 38px;
 	    padding: 2px 9px;
 	    border-radius: 999px;
@@ -6901,11 +6909,11 @@ header.navheader h1 {
     background: rgba(255,255,255,0.06);
   }
   .mobile-bottom-nav .app-header-info {
-    flex: 0 1 42%;
-    max-width: 42%;
+    flex: 0 1 auto;
+    max-width: min(260px, 42%);
   }
   .mobile-bottom-nav .app-header-info-trigger {
-    width: 100%;
+    width: auto;
     max-width: 100%;
     height: auto;
     min-height: 18px;
@@ -6976,14 +6984,15 @@ header.navheader h1 {
     display: none;
   }
 	  .mobile-bottom-nav .resource-usage {
-	    flex: 1 1 120px;
-	    max-width: none;
+	    flex: 0 1 auto;
+	    max-width: 100%;
 	  }
 	  .mobile-bottom-nav .resource-usage-trigger {
-	    width: 100%;
+	    width: auto;
+	    max-width: 100%;
 	    height: auto;
 	    min-height: 0;
-	    justify-content: flex-start;
+	    justify-content: center;
 	    align-content: center;
 	    flex-wrap: wrap;
 	    gap: 2px 5px;
@@ -16623,8 +16632,10 @@ const rerenderMenuSection = (container, html) => {
     })
     aside.addEventListener("pointerleave", closePeekSoon)
     aside.addEventListener("focusout", closePeekSoon)
-    aside.addEventListener("click", () => {
+    aside.addEventListener("click", (event) => {
       if (!isPeeking()) return
+      const target = event.target
+      if (target && target.closest && target.closest(".reveal, .revealer, [data-app-autolaunch-button]")) return
       window.setTimeout(() => setPeeking(false), 0)
     })
     document.addEventListener("pointerdown", (event) => {

package/server/views/partials/home_server_popover_assets.ejs

@@ -999,6 +999,9 @@ body.dark .home-server-popover__qr-close:focus-visible {
   const render = (data) => {
     const status = data && data.status ? data.status : "off"
     setStatus(status)
+    document.dispatchEvent(new CustomEvent("pinokio:home-server-status", {
+      detail: { status, payload: data || { status } }
+    }))
     if (!panel) {
       return
     }

package/server/views/partials/main_sidebar.ejs

@@ -35,7 +35,7 @@
 
     <div class='main-sidebar-section' aria-label="Configure">
       <div class="main-sidebar-section-title">Configure</div>
-      <a href="/network" class="tab <%= sidebarSelected === 'network' ? 'selected' : '' %>"><i class="fa-solid fa-wifi"></i><div class='caption'>Home Server</div></a>
+      <a href="/network" class="tab <%= sidebarSelected === 'network' ? 'selected' : '' %>" data-main-sidebar-home-server-tab><i class="fa-solid fa-wifi"></i><div class='caption'>Home Server</div><span class="main-sidebar-status-badge" data-main-sidebar-home-server-status aria-hidden="true" hidden></span></a>
       <a class="tab <%= sidebarSelected === 'autolaunch' ? 'selected' : '' %>" href="/autolaunch"><i class="fa-solid fa-power-off"></i><div class='caption'>Autolaunch</div></a>
       <a href="/connect" class="tab <%= sidebarSelected === 'connect' ? 'selected' : '' %>"><i class="fa-solid fa-plug"></i><div class='caption'>Login</div></a>
       <a class="tab <%= sidebarSelected === 'settings' ? 'selected' : '' %>" href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
@@ -49,6 +49,51 @@
     const headerToggle = document.getElementById("minimize-header");
     const sidebar = document.getElementById("main-sidebar");
     const peekTrigger = document.querySelector("[data-main-sidebar-peek-trigger]");
+
+    const initHomeServerStatusBadge = () => {
+      if (!sidebar || window.__pinokioMainSidebarHomeServerStatusInit) return;
+      const homeServerTab = sidebar.querySelector("[data-main-sidebar-home-server-tab]");
+      const homeServerBadge = sidebar.querySelector("[data-main-sidebar-home-server-status]");
+      if (!homeServerTab || !homeServerBadge) return;
+
+      window.__pinokioMainSidebarHomeServerStatusInit = true;
+
+      const renderHomeServerStatus = (data) => {
+        const status = data && data.status ? String(data.status) : "off";
+        const badgeState = status === "on" ? "on" : "off";
+        const label = badgeState === "on" ? "ON" : "OFF";
+        homeServerBadge.textContent = label;
+        homeServerBadge.hidden = false;
+        homeServerBadge.dataset.state = badgeState;
+        homeServerTab.dataset.homeServerStatus = badgeState;
+        homeServerTab.setAttribute("aria-label", `Home Server, ${label}`);
+        homeServerTab.setAttribute("title", `Home Server ${label}`);
+      };
+
+      document.addEventListener("pinokio:home-server-status", (event) => {
+        const detail = event && event.detail ? event.detail : {};
+        renderHomeServerStatus(detail.payload || detail);
+      });
+
+      fetch("/info/home-server", { cache: "no-store" })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`Home Server status failed: ${response.status}`);
+          }
+          return response.json();
+        })
+        .then(renderHomeServerStatus)
+        .catch(() => {
+          homeServerBadge.hidden = true;
+          delete homeServerBadge.dataset.state;
+          delete homeServerTab.dataset.homeServerStatus;
+          homeServerTab.removeAttribute("aria-label");
+          homeServerTab.removeAttribute("title");
+        });
+    };
+
+    initHomeServerStatusBadge();
+
     if (body && sidebar && headerToggle && !headerToggle.dataset.mainSidebarHeaderToggle) {
       headerToggle.dataset.mainSidebarHeaderToggle = "true";
       headerToggle.classList.add("sidebar-toggle", "main-sidebar-header-toggle");

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

@@ -643,8 +643,23 @@ test("app navbar stays on one line when app identity and Home Server controls ar
   assert.match(appView, /body\.app-page > header\.navheader h1 > \.home,[\s\S]*body\.app-page > header\.navheader h1 > \.home-server-popover\s*\{[\s\S]*flex:\s*0 0 auto;/)
   assert.match(appView, /body\.app-page header\.navheader h1 > \.flexible\s*\{[\s\S]*flex:\s*0 0 0;[\s\S]*margin-left:\s*auto;/)
   assert.match(appView, /\.app-header-identity\s*\{[\s\S]*flex:\s*1 1 auto;[\s\S]*max-width:\s*none;/)
+  assert.match(appView, /\.app-header-info\s*\{[\s\S]*flex:\s*0 1 auto;/)
+  const identityTriggerStart = appView.indexOf(".app-header-info-trigger {")
+  const identityTriggerEnd = appView.indexOf("\n}", identityTriggerStart)
+  const identityTriggerRule = identityTriggerStart >= 0 && identityTriggerEnd > identityTriggerStart
+    ? appView.slice(identityTriggerStart, identityTriggerEnd)
+    : ""
+  assert.match(identityTriggerRule, /max-width:\s*min\(260px, 32vw\);/)
+  assert.doesNotMatch(identityTriggerRule, /width:\s*100%;/)
+  assert.doesNotMatch(identityTriggerRule, /max-width:\s*none;/)
   assert.doesNotMatch(appView, /nav-action-label\s*\{[^}]*display:\s*none;/)
-  assert.match(appView, /@media only screen and \(max-width: 1180px\)\s*\{[\s\S]*\.resource-chip--vram[\s\S]*display:\s*none !important;/)
+  const compactRuleStart = appView.indexOf("@media only screen and (max-width: 1180px)")
+  const compactRuleEnd = appView.indexOf(".resource-usage {", compactRuleStart)
+  const compactHeaderRule = compactRuleStart >= 0 && compactRuleEnd > compactRuleStart
+    ? appView.slice(compactRuleStart, compactRuleEnd)
+    : ""
+  assert.match(compactHeaderRule, /body\.app-page header\.navheader \.resource-usage-trigger\s*\{[\s\S]*gap:\s*4px;[\s\S]*padding:\s*0 3px;/)
+  assert.doesNotMatch(compactHeaderRule, /\.resource-chip--(?:cpu|ram|vram)[\s\S]*display:\s*none !important;/)
 })
 
 test("download page header does not show browser chrome controls", async () => {
@@ -848,7 +863,7 @@ test("static guard: collapsed idle run page peeks without persisting sidebar sta
   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, /setCollapsed\(initialCollapsed, \{ persist: false \}\)/)
-  assert.match(appView, /aside\.addEventListener\("click", \(\) => \{[\s\S]*window\.setTimeout\(\(\) => setPeeking\(false\), 0\)/)
+  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 () => {
@@ -868,7 +883,12 @@ test("app sidebar auto-peeks on collapsed idle run page and dismisses after clic
       <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" id="sidebar-action">Start</button></aside>
+        <aside id="app-sidebar">
+          <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>
@@ -901,6 +921,18 @@ test("app sidebar auto-peeks on collapsed idle run page and dismisses after clic
   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)
+  assert.equal(appcanvas.classList.contains("sidebar-peeking"), true)
+
+  aside.querySelector("#sidebar-revealer").dispatchEvent(new dom.window.MouseEvent("click", { bubbles: true }))
+  await wait(5)
+  assert.equal(appcanvas.classList.contains("sidebar-peeking"), true)
+
+  aside.querySelector("#sidebar-autolaunch").dispatchEvent(new dom.window.MouseEvent("click", { bubbles: true }))
+  await wait(5)
+  assert.equal(appcanvas.classList.contains("sidebar-peeking"), true)
+
   aside.querySelector("#sidebar-action").dispatchEvent(new dom.window.MouseEvent("click", { bubbles: true }))
   await wait(5)
 
@@ -953,7 +985,30 @@ test("app identity popover exposes launcher metadata and remote browser link", a
   assert.match(appView, /window\.open\(href, "_blank"\)/)
   assert.match(appView, /window\.open\(href, "_blank", "browser"\)/)
   assert.match(appView, /No browser-openable remote detected/)
-  assert.match(appView, /\.mobile-bottom-nav__identity \{[\s\S]*overflow: visible;/)
+  const cssRule = (selector) => {
+    const start = appView.indexOf(`${selector} {`)
+    if (start < 0) return ""
+    const tail = appView.slice(start)
+    const end = tail.match(/\n\s*\}/)
+    return end ? tail.slice(0, end.index + end[0].length) : ""
+  }
+  const mobileIdentityRule = cssRule(".mobile-bottom-nav__identity")
+  const mobileInfoRule = cssRule(".mobile-bottom-nav .app-header-info")
+  const mobileInfoTriggerRule = cssRule(".mobile-bottom-nav .app-header-info-trigger")
+  const mobileResourceRule = cssRule(".mobile-bottom-nav .resource-usage")
+  const mobileResourceTriggerRule = cssRule(".mobile-bottom-nav .resource-usage-trigger")
+  assert.match(mobileIdentityRule, /justify-content:\s*center;/)
+  assert.match(mobileIdentityRule, /overflow:\s*visible;/)
+  assert.doesNotMatch(mobileIdentityRule, /justify-content:\s*flex-start;/)
+  assert.match(mobileInfoRule, /flex:\s*0 1 auto;/)
+  assert.match(mobileInfoRule, /max-width:\s*min\(260px, 42%\);/)
+  assert.match(mobileInfoTriggerRule, /width:\s*auto;/)
+  assert.doesNotMatch(mobileInfoTriggerRule, /(^|\n)\s*width:\s*100%;/)
+  assert.match(mobileResourceRule, /flex:\s*0 1 auto;/)
+  assert.match(mobileResourceRule, /max-width:\s*100%;/)
+  assert.match(mobileResourceTriggerRule, /width:\s*auto;/)
+  assert.match(mobileResourceTriggerRule, /justify-content:\s*center;/)
+  assert.doesNotMatch(mobileResourceTriggerRule, /justify-content:\s*flex-start;/)
   assert.match(appView, /\.mobile-bottom-nav \.app-header-info-popover \{[\s\S]*bottom: calc\(100% \+ 9px\);[\s\S]*width: min\(390px, calc\(100vw - 24px\)\);/)
   assert.match(appView, /\.mobile-bottom-nav \.resource-usage-popover \{[\s\S]*bottom: calc\(100% \+ 9px\);/)
   assert.doesNotMatch(appView, /Open launcher remote/)

package/test/main-sidebar.test.js

@@ -21,11 +21,31 @@ test('main sidebar moves Home Server under Configure', async () => {
   assert.ok(configureIndex < homeServerIndex)
   assert.ok(homeServerIndex < autolaunchIndex)
   assert.match(source, /href="\/network"[\s\S]*Home Server/)
+  assert.match(source, /data-main-sidebar-home-server-tab/)
+  assert.match(source, /data-main-sidebar-home-server-status/)
+  assert.match(source, /fetch\("\/info\/home-server", \{ cache: "no-store" \}\)/)
+  assert.match(source, /status === "on" \? "on" : "off"/)
   assert.doesNotMatch(source, /aria-label="Computer"/)
   assert.doesNotMatch(source, />This machine</)
   assert.doesNotMatch(source, />Local network</)
 })
 
+test('main sidebar styles the Home Server ON/OFF badge in the tab status column', async () => {
+  const style = await fs.readFile(path.resolve(__dirname, '..', 'server', 'public', 'style.css'), 'utf8')
+  const badgeRule = style.match(/\.main-sidebar \.main-sidebar-status-badge \{[\s\S]*?\n\}/)?.[0] || ''
+  const darkBadgeRule = style.match(/body\.dark \.main-sidebar \.main-sidebar-status-badge \{[\s\S]*?\n\}/)?.[0] || ''
+
+  assert.match(style, /\.main-sidebar \.main-sidebar-status-badge \{/)
+  assert.match(style, /grid-column:\s*3/)
+  assert.match(style, /\.main-sidebar \.main-sidebar-status-badge\[hidden\]/)
+  assert.match(style, /\.main-sidebar \.main-sidebar-status-badge\[data-state="on"\]/)
+  assert.match(style, /body\.dark \.main-sidebar \.main-sidebar-status-badge\[data-state="on"\]/)
+  assert.match(badgeRule, /background:\s*rgba\(15,\s*23,\s*42,\s*0\.07\)/)
+  assert.match(darkBadgeRule, /background:\s*rgba\(255,\s*255,\s*255,\s*0\.08\)/)
+  assert.doesNotMatch(`${badgeRule}\n${darkBadgeRule}`, /rgba\(207,\s*69,\s*69,\s*0\.12\)/)
+  assert.doesNotMatch(`${badgeRule}\n${darkBadgeRule}`, /#fca5a5/)
+})
+
 test('main sidebar no longer renders peer rows or phone access modal', async () => {
   const source = await fs.readFile(sidebarFile, 'utf8')
   const style = await fs.readFile(path.resolve(__dirname, '..', 'server', 'public', 'style.css'), 'utf8')