pinokiod 7.3.9 → 7.3.11

package/server/views/index.ejs

@@ -509,9 +509,9 @@ aside .btn-tab .btn .caption {
   position: relative;
   align-items: center;
   gap: 5px;
-  height: 30px;
-  min-height: 30px;
-  padding: 0 10px;
+  height: var(--home-filter-control-height);
+  min-height: var(--home-filter-control-height);
+  padding: 0 12px;
   border: 1px solid var(--home-sort-border);
   border-radius: 6px;
   background: var(--home-sort-bg);
@@ -581,9 +581,12 @@ aside .btn-tab .btn .caption {
   flex: 0 0 auto;
   width: 132px;
   min-width: 132px;
+  height: 100%;
 }
 
 .home-search-form .home-apps-sort .ts-wrapper.single .ts-control {
+  display: flex;
+  align-items: center;
   border: 0;
   outline: none;
   background: transparent;
@@ -595,6 +598,7 @@ aside .btn-tab .btn .caption {
   border-radius: 0;
   cursor: pointer;
   color: inherit;
+  height: 100%;
 }
 
 .home-search-form .home-apps-sort .ts-control > .item {
@@ -704,6 +708,7 @@ body.dark .home-search-form .home-apps-sort .ts-dropdown [data-selectable].optio
   color: var(--home-sort-option-hover-text);
 }
 .home-search-form {
+  --home-filter-control-height: 40px;
   align-items: center;
   gap: 8px;
 }
@@ -731,11 +736,11 @@ body.dark .home-search-form {
   border-bottom-color: rgba(148, 163, 184, 0.22);
 }
 .home-search-form input[type='search'].flexible {
-  height: 30px;
-  min-height: 30px;
+  height: var(--home-filter-control-height);
+  min-height: var(--home-filter-control-height);
   box-sizing: border-box;
-  padding: 0 10px;
-  border-radius: 5px;
+  padding: 0 12px;
+  border-radius: 6px;
   font-size: 12px;
   font-weight: 400;
   line-height: 1;
@@ -1150,12 +1155,64 @@ body.dark aside .current.selected {
 */
 @media only screen and (max-width: 760px) {
   .home-search-form {
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     gap: 8px;
   }
+  .home-search-form input[type='search'].flexible {
+    min-width: 0;
+    flex: 1 1 auto;
+  }
   .home-search-form .home-apps-sort {
+    width: var(--home-filter-control-height);
+    min-width: var(--home-filter-control-height);
+    padding: 0;
+    justify-content: center;
     margin-left: 0;
   }
+  .home-search-form .home-apps-sort label,
+  .home-search-form .home-apps-sort .ts-control > .item {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  .home-search-form .home-apps-sort .home-apps-sort-icon {
+    font-size: 14px;
+  }
+  .home-search-form .home-apps-sort .home-apps-sort-caret {
+    position: absolute;
+    right: 7px;
+    bottom: 7px;
+    font-size: 7px;
+  }
+  .home-search-form .home-apps-sort select {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    min-width: 0;
+    opacity: 0;
+    z-index: 1;
+  }
+  .home-search-form .home-apps-sort .ts-wrapper {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    opacity: 0;
+    z-index: 1;
+  }
+  .home-search-form .home-apps-sort .ts-dropdown {
+    left: auto !important;
+    right: 0 !important;
+    width: 164px !important;
+    min-width: 164px !important;
+  }
   header .flexible {
     min-width: unset;
   }

package/server/views/install.ejs

@@ -17,22 +17,33 @@
 document.documentElement.dataset.installSpinnerVariant = "grid-shift"
 </script>
 <style>
-body {
+html {
+  height: 100%;
+}
+body.install-page {
   --install-status-bg: var(--pinokio-chrome-accent-bg-light);
   --install-spinner-fg: rgba(0,0,0,0.8);
   --install-status-fg: var(--pinokio-chrome-accent-fg-light);
   --install-status-fg-soft: rgba(225, 178, 97, 0.34);
   --install-status-border: rgba(15, 23, 42, 0.12);
   --install-status-detail: rgba(0, 0, 0, 0.6);
-  height: 100%;
+  height: 100vh;
+  min-height: 100vh;
   overflow: hidden;
   /*
   background: rgb(44, 29, 22);
   */
   display: flex;
-  flex-direction: column;
+  flex-direction: column !important;
+  align-items: stretch;
 }
-body.dark {
+@supports (height: 100dvh) {
+  body.install-page {
+    height: 100dvh;
+    min-height: 100dvh;
+  }
+}
+body.install-page.dark {
   --install-status-bg: var(--pinokio-chrome-accent-bg-dark);
   --install-spinner-fg: white;
   --install-status-fg: var(--pinokio-chrome-accent-fg-dark);
@@ -40,8 +51,18 @@ body.dark {
   --install-status-border: rgba(255, 255, 255, 0.08);
   --install-status-detail: rgba(239, 233, 214, 0.76);
 }
+body.install-page > header.grabbable {
+  flex: 0 0 auto;
+}
+body.install-page > .terminal-container {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
 #terminal {
   flex-grow: 1;
+  height: 100%;
+  min-height: 0;
 }
 .line2 {
   display: flex;
@@ -111,7 +132,9 @@ body.dark {
   color: rgba(0,0,0,0.5);
 }
 #status-screen {
+  flex: 0 0 auto;
   padding: 14px 18px;
+  padding-bottom: calc(14px + env(safe-area-inset-bottom));
   box-sizing: border-box;
   width: 100%;
   margin: 0;
@@ -348,25 +371,6 @@ body.dark {
 [data-install-spinner-variant="binary-shuffle"] .install-status-grid-tile-4 {
   animation: pinokio-binary-shuffle-4 1.1s steps(1, end) infinite;
 }
-.install-loader-popup.swal2-popup.loader-popup {
-  background: var(--install-status-bg) !important;
-  color: var(--install-status-fg) !important;
-  border: 1px solid var(--install-status-border) !important;
-  border-radius: 999px !important;
-  box-shadow: none !important;
-}
-.install-loader-dialog.loader-dialog {
-  padding: 0 !important;
-}
-.install-loader-shell {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--install-status-fg);
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: 0.01em;
-}
 @keyframes pinokio-grid-shift-1 {
   0%, 100% { transform: translate(0, 0); }
   25% { transform: translate(11px, 0); }
@@ -506,7 +510,7 @@ body.dark {
 <script src="/waitmodal.js"></script>
 <script src="/notifyinput.js"></script>
 </head>
-<body class='<%=theme%>' data-agent="<%=agent%>">
+<body class='install-page <%=theme%>' data-agent="<%=agent%>">
 <header class='grabbable'></header>
 <div class='terminal-container'>
   <div id='terminal'></div>
@@ -641,13 +645,88 @@ const setInstallStatus = (html) => {
   }
   statusScreen.innerHTML = normalizeInstallStatusHtml(html)
 }
-const renderInstallLoader = (msg) => {
-  return `
-    <span class="install-loader-shell">
+const setRestartStatus = () => {
+  applyInstallSpinnerVariant("corner-chase")
+  setInstallStatus(`
+    <div class="install-status-shell">
       ${INSTALL_STATUS_SPINNER_HTML}
-      <span>${msg}</span>
-    </span>
-  `
+      <div class="install-status-copy">
+        <div class="install-status-title">Restarting Pinokio...</div>
+        <div class="install-status-detail">Applying the updated system tools. Pinokio will continue automatically.</div>
+      </div>
+    </div>
+  `)
+}
+let networkSharingWarningOpen = false
+const isLoopbackHost = (hostname) => {
+  const normalized = String(hostname || "").toLowerCase()
+  return normalized === "localhost" || normalized === "127.0.0.1" || normalized === "::1" || normalized === "[::1]"
+}
+const defaultPortForProtocol = (protocol) => {
+  return protocol === "https:" ? "443" : "80"
+}
+const normalizedPort = (url) => {
+  return url.port || defaultPortForProtocol(url.protocol)
+}
+const resolveLanCallbackHref = (href) => {
+  if (!href) {
+    return "/"
+  }
+  try {
+    const target = new URL(href, window.location.href)
+    const current = new URL(window.location.href)
+    if (
+      !isLoopbackHost(current.hostname) &&
+      isLoopbackHost(target.hostname) &&
+      target.protocol === current.protocol &&
+      normalizedPort(target) === normalizedPort(current)
+    ) {
+      target.hostname = current.hostname
+      return target.toString()
+    }
+  } catch (_) {}
+  return href
+}
+const requiresNetworkSharing = (href) => {
+  if (isLoopbackHost(window.location.hostname)) {
+    return false
+  }
+  try {
+    const parsed = new URL(href, window.location.href)
+    return parsed.protocol === "http:" && isLoopbackHost(parsed.hostname)
+  } catch (_) {
+    return false
+  }
+}
+const showNetworkSharingRequired = (href) => {
+  if (!requiresNetworkSharing(href)) {
+    return false
+  }
+  if (networkSharingWarningOpen) {
+    return true
+  }
+  networkSharingWarningOpen = true
+  Swal.fire({
+    title: "Turn on network sharing",
+    text: "Open Network to turn on local network sharing, then come back to this install.",
+    showCancelButton: true,
+    confirmButtonText: "Open Network",
+    cancelButtonText: "Stay here"
+  }).then((result) => {
+    networkSharingWarningOpen = false
+    if (result.isConfirmed) {
+      window.location.href = "/network"
+    }
+  })
+  return true
+}
+const navigateToCallback = () => {
+  const callback = document.querySelector("#callback")
+  const href = resolveLanCallbackHref(callback && callback.value ? callback.value : "/")
+  if (showNetworkSharingRequired(href)) {
+    return
+  }
+  location.href = href
 }
 const createTerm = async (_theme) => {
   //const theme = Object.assign({ }, xtermTheme.Terminal_Basic, {
@@ -675,10 +754,10 @@ const createTerm = async (_theme) => {
     config = window.PinokioTerminalSettings.applyToConfig(config)
   }
   const term = new Terminal(config)
+  term.open(document.querySelector("#terminal"))
   if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.register === 'function') {
     window.PinokioTerminalSettings.register(term, { baseConfig })
   }
-  term.open(document.querySelector("#terminal"))
   const terminalContainer = document.querySelector("#terminal")
   window.PinokioTouch.bindTerminalFocus(term, terminalContainer)
 
@@ -737,18 +816,30 @@ document.addEventListener("DOMContentLoaded", async () => {
   observer.observe(document.body)
   await new Promise((resolve, reject) => {
     console.log({ cols: term.cols, rows: term.rows })
-    socket.run({
+    const requirements = document.querySelector("#requirements").value
+    const rpc = {
       id: location.pathname,
       method: "kernel.bin.install",
-//      params: options,
-      params: document.querySelector("#requirements").value,
       client: {
         cols: term.cols,
         rows: term.rows,
       }
-    }, async (packet) => {
+    }
+    if (requirements && requirements.trim().length > 0) {
+      rpc.params = requirements
+    } else {
+      rpc.mode = "listen"
+    }
+    socket.run(rpc, async (packet) => {
       console.log("packet", packet)
-      if (packet.type === "stream") {
+      if (packet.type === "connect") {
+        if (packet.data && packet.data.shell) {
+          shell_id = packet.data.shell
+        }
+        if (packet.data && packet.data.state) {
+          term.write(packet.data.state)
+        }
+      } else if (packet.type === "stream") {
         if (packet.data.id) {
           shell_id = packet.data.id
         }
@@ -787,7 +878,7 @@ document.addEventListener("DOMContentLoaded", async () => {
             confirm: "OK",
           })
           if (packet.data.blocker) {
-            location.href = document.querySelector("#callback").value
+            navigateToCallback()
             return
           }
         }
@@ -844,48 +935,26 @@ document.addEventListener("DOMContentLoaded", async () => {
       }
     })
   })
-  const LoadingDialog = {
-    start: (msg) => {
-      Swal.fire({
-        html: renderInstallLoader(msg),
-        customClass: {
-          container: "loader-container",
-          popup: "loader-popup install-loader-popup",
-          htmlContainer: "loader-dialog install-loader-dialog",
-          footer: "hidden",
-          actions: "hidden"
-        }
-      });
-    },
-    end: () => {
-      Swal.close()
-    }
-  }
-  LoadingDialog.start("Restarting...")
+  setRestartStatus()
   fetch("/restart", {
     method: "post"
-  }, () => {
+  }).catch((error) => {
+    console.warn("restart request ended early", error)
   })
-  setInterval(async () => {
+  const restartPoll = setInterval(async () => {
     try {
       let res = await fetch("/bin_ready").then((res) => {
         return res.json()
       })
       if (res.success) {
         //location.href = location.href
-        LoadingDialog.end()
-        location.href = document.querySelector("#callback").value
+        clearInterval(restartPoll)
+        navigateToCallback()
       }
     } catch (e) {
       console.log(e)
     }
   }, 1000)
-//  let ok = confirm("Install Complete! Click OK to Proceed.")
-//  if (ok) {
-//  }
-
-
-//    location.href = document.querySelector("#callback").value
 })
 </script>
 </body>

package/server/views/logs.ejs

@@ -41,14 +41,16 @@
     <% if (!logsError) { %>
     <section class="logs-page" id="logs-root" data-workspace="<%= logsWorkspace ? logsWorkspace : '' %>" data-report-url="<%= logsReportUrl || '' %>" data-initial-view="<%= logsInitialView || 'raw' %>">
       <div class="logs-page-header">
-        <div class="logs-page-switch">
+        <div class="logs-page-header-main">
+          <h1 class="logs-page-title">Logs</h1>
+          <p class="logs-page-description">Inspect live log files and export diagnostics from this machine.</p>
           <% if (logsReportUrl) { %>
-            <div class="logs-view-switch" role="tablist" aria-label="Log views">
-              <button type="button" class="logs-view-tab" data-logs-view="latest" role="tab" aria-controls="logs-latest-panel">Latest</button>
-              <button type="button" class="logs-view-tab" data-logs-view="raw" role="tab" aria-controls="logs-raw-panel">Raw logs</button>
+            <div class="logs-page-switch">
+              <div class="logs-view-switch" role="tablist" aria-label="Log views">
+                <button type="button" class="logs-view-tab" data-logs-view="latest" role="tab" aria-controls="logs-latest-panel">Latest</button>
+                <button type="button" class="logs-view-tab" data-logs-view="raw" role="tab" aria-controls="logs-raw-panel">Raw logs</button>
+              </div>
             </div>
-          <% } else { %>
-            <div class="logs-raw-only-title"><i class="fa-solid fa-laptop-code" aria-hidden="true"></i><span>Logs</span></div>
           <% } %>
         </div>
         <div class="logs-page-controls">
@@ -144,9 +146,8 @@
         <div class="logs-sidebar" aria-label="Log folders">
           <div class="logs-sidebar-header">
             <div>
-              <p class="logs-sidebar-eyebrow">Raw log files</p>
               <h2>Files</h2>
-              <div class="logs-tree-hint">Select a file to stream live output.</div>
+              <div class="logs-tree-hint">Select a log file to stream.</div>
             </div>
             <div class="logs-zip-status" id="logs-zip-status" role="status" aria-live="polite"></div>
           </div>