pinokiod 7.3.15 → 7.4.0

package/server/views/index.ejs

@@ -215,6 +215,42 @@ body.dark .home-app-line .menu-btns > .btn:focus-visible {
   background: rgba(255, 255, 255, 0.07) !important;
   color: rgba(248, 250, 252, 0.9) !important;
 }
+.home-autolaunch-status {
+  min-height: 22px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 7px;
+  border: 1px solid rgba(180, 83, 9, 0.18);
+  border-radius: 6px;
+  background: rgba(180, 83, 9, 0.07);
+  color: rgba(120, 53, 15, 0.9);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+}
+.home-autolaunch-status i {
+  color: inherit !important;
+  font-size: 11px;
+}
+body.dark .home-autolaunch-status {
+  border-color: rgba(214, 164, 81, 0.22);
+  background: rgba(214, 164, 81, 0.1);
+  color: rgba(252, 211, 146, 0.92);
+}
+.home-app-line.autolaunch-starting .title i {
+  color: #b45309 !important;
+}
+body.dark .home-app-line.autolaunch-starting .title i {
+  color: #d6a451 !important;
+}
+.home-app-line.autolaunch-blocked .title i {
+  color: #dc2626 !important;
+}
+body.dark .home-app-line.autolaunch-blocked .title i {
+  color: #f87171 !important;
+}
 .context-menu {
   position: absolute;
   right: auto;
@@ -902,6 +938,7 @@ body.dark .home-actions-path {
   display: inline-flex;
   align-items: center;
   flex: 0 0 auto;
+  max-width: min(260px, 45vw);
   height: 20px;
   padding: 0 7px;
   border-radius: 999px;
@@ -910,6 +947,9 @@ body.dark .home-actions-path {
   font-size: 11px;
   font-weight: 700;
   line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 body.dark .home-actions-status,
 body.dark .home-run-menu-status,
@@ -917,6 +957,14 @@ body.dark .home-actions-count {
   background: var(--pinokio-chrome-accent-bg-dark);
   color: var(--pinokio-chrome-accent-fg-dark);
 }
+.home-actions-status--starting {
+  background: rgba(180, 83, 9, 0.08);
+  color: rgba(120, 53, 15, 0.92);
+}
+body.dark .home-actions-status--starting {
+  background: rgba(214, 164, 81, 0.12);
+  color: rgba(252, 211, 146, 0.95);
+}
 .home-actions-close {
   width: 30px;
   height: 30px;
@@ -1373,7 +1421,7 @@ body.dark aside .current.selected {
   <% if (running.length > 0) { %>
     <div class='running-apps'>
       <% running.forEach((item, index) => { %>
-        <div data-href="<%=item.browser_url%>" data-target="<%=item.target || '_self'%>" data-description="<%=item.description%>" data-index="<%=item.index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-uri="<%=item.uri%>" data-icon="<%=item.icon%>" data-path="<%=item.path%>"  data-iconpath="<%=item.iconpath ? item.iconpath : ''%>" data-starred="<%=item.starred ? "1" : "0"%>" data-launch-count-total="<%=item.launch_count_total || 0%>" data-last-launch-at="<%=item.last_launch_at || ''%>" class='line align-top home-app-line' role='link' tabindex='0'>
+        <div data-href="<%=item.browser_url%>" data-target="<%=item.target || '_self'%>" data-description="<%=item.description%>" data-index="<%=item.index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-uri="<%=item.uri%>" data-icon="<%=item.icon%>" data-path="<%=item.path%>"  data-iconpath="<%=item.iconpath ? item.iconpath : ''%>" data-starred="<%=item.starred ? "1" : "0"%>" data-launch-count-total="<%=item.launch_count_total || 0%>" data-last-launch-at="<%=item.last_launch_at || ''%>" data-autolaunch-starting="<%=item.autolaunch_starting ? "1" : "0"%>" data-autolaunch-app="<%=item.uri%>" data-autolaunch-script="<%=item.autolaunch_script || ''%>" class='line align-top home-app-line <%=item.autolaunch_starting ? "autolaunch-starting" : ""%> <%=item.autolaunch_waiting ? "autolaunch-waiting" : ""%> <%=item.autolaunch_blocked ? "autolaunch-blocked" : ""%>' role='link' tabindex='0'>
           <h3>
             <div class='item-icon'>
               <% if (item.icon) { %>
@@ -1407,6 +1455,14 @@ body.dark aside .current.selected {
                 <button class='btn open-menu open-actions-modal' type='button' data-dialog-id="home-actions-running-<%=index%>" aria-haspopup="dialog" title="Actions" aria-label="Actions">
                   <i class="fa-solid fa-ellipsis" aria-hidden="true"></i><span> menu</span>
                 </button>
+                <% const autolaunchRunningScript = !!(item.autolaunch_starting && item.autolaunch_script && item.running_scripts && item.running_scripts.some((s) => { const scriptName = s && (s.name || s.script_path || s.path || ""); return scriptName === item.autolaunch_script || String(scriptName).endsWith(`/${item.autolaunch_script}`) })) %>
+                <% if (item.autolaunch_starting && !autolaunchRunningScript) { %>
+                  <% const autolaunchStatusLabel = item.autolaunch_status_label || "Starting automatically" %>
+                  <span class='home-autolaunch-status' title='<%= autolaunchStatusLabel %>'>
+                    <i class='fa-solid <%= item.autolaunch_blocked ? "fa-triangle-exclamation" : "fa-circle-notch fa-spin" %>' aria-hidden='true'></i>
+                    <span><%= autolaunchStatusLabel %></span>
+                  </span>
+                <% } %>
                 <% const runningTerminalOnlineCount = Number(item.terminal_online_count || 0) %>
                 <% const runningTerminalLabel = runningTerminalOnlineCount > 0 ? `${runningTerminalOnlineCount} terminal${runningTerminalOnlineCount === 1 ? "" : "s"} online` : "Terminals" %>
                 <% if (runningTerminalOnlineCount > 0) { %>
@@ -1419,17 +1475,26 @@ body.dark aside .current.selected {
                 <% if (item.running_scripts) { %>
                   <% item.running_scripts.forEach((s) => { %>
                   <% const runningScriptName = s.name || "script" %>
+                  <% const isStartingAutolaunchScript = !!(item.autolaunch_starting && !item.autolaunch_waiting && !item.autolaunch_blocked && item.autolaunch_script && (runningScriptName === item.autolaunch_script || String(runningScriptName).endsWith(`/${item.autolaunch_script}`))) %>
+                  <% const stepCurrent = Number(isStartingAutolaunchScript && (s.step_current || item.autolaunch_step_current)) %>
+                  <% const stepTotal = Number(isStartingAutolaunchScript && (s.step_total || item.autolaunch_step_total)) %>
+                  <% const stepLabel = Number.isFinite(stepCurrent) && Number.isFinite(stepTotal) && stepCurrent > 0 && stepTotal > 1 ? ` (${stepCurrent}/${stepTotal})` : "" %>
+                  <% const runningScriptButtonLabel = isStartingAutolaunchScript ? `Starting ${runningScriptName}${stepLabel}` : `Stop ${runningScriptName}` %>
                   <% if (s.id) { %>
                       <button class='btn shutdown' type='button' data-id="<%=s.id%>" data-type="<%=s.type ? s.type : ''%>" title="Stop <%=runningScriptName%>" aria-label="Stop <%=runningScriptName%>">
                         <i class="fa-solid fa-stop" aria-hidden="true"></i>
-                        <span>Stop <%=runningScriptName%></span>
-                        <i class='fa-solid fa-spin fa-circle-notch' aria-hidden='true'></i>
+                        <span><%= runningScriptButtonLabel %></span>
+                        <% if (isStartingAutolaunchScript) { %>
+                          <i class='home-stop-spinner fa-solid fa-spin fa-circle-notch' aria-hidden='true'></i>
+                        <% } %>
                       </button>
                     <% } else { %>
                       <button class='btn shutdown' type='button' data-src="<%=s.path%>" title="Stop <%=runningScriptName%>" aria-label="Stop <%=runningScriptName%>">
                         <i class="fa-solid fa-stop" aria-hidden="true"></i>
-                        <span>Stop <%=runningScriptName%></span>
-                        <i class='fa-solid fa-spin fa-circle-notch' aria-hidden='true'></i>
+                        <span><%= runningScriptButtonLabel %></span>
+                        <% if (isStartingAutolaunchScript) { %>
+                          <i class='home-stop-spinner fa-solid fa-spin fa-circle-notch' aria-hidden='true'></i>
+                        <% } %>
                       </button>
                     <% } %>
                   <% }) %>
@@ -1454,7 +1519,7 @@ body.dark aside .current.selected {
   <% if (notRunning.length > 0) { %>
     <div class='not-running-apps'>
       <% notRunning.forEach((item, index) => { %>
-        <div data-href="<%=item.browser_url%>" data-target="<%=item.target || '_self'%>" data-description="<%=item.description%>" data-index="<%=item.index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-uri="<%=item.uri%>" data-icon="<%=item.icon%>" data-path="<%=item.path%>"  data-iconpath="<%=item.iconpath ? item.iconpath : ''%>" data-starred="<%=item.starred ? "1" : "0"%>" data-launch-count-total="<%=item.launch_count_total || 0%>" data-last-launch-at="<%=item.last_launch_at || ''%>" class='line align-top home-app-line' role='link' tabindex='0'>
+        <div data-href="<%=item.browser_url%>" data-target="<%=item.target || '_self'%>" data-description="<%=item.description%>" data-index="<%=item.index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-uri="<%=item.uri%>" data-icon="<%=item.icon%>" data-path="<%=item.path%>"  data-iconpath="<%=item.iconpath ? item.iconpath : ''%>" data-starred="<%=item.starred ? "1" : "0"%>" data-launch-count-total="<%=item.launch_count_total || 0%>" data-last-launch-at="<%=item.last_launch_at || ''%>" data-autolaunch-starting="<%=item.autolaunch_starting ? "1" : "0"%>" data-autolaunch-app="<%=item.uri%>" data-autolaunch-script="<%=item.autolaunch_script || ''%>" class='line align-top home-app-line <%=item.autolaunch_starting ? "autolaunch-starting" : ""%> <%=item.autolaunch_waiting ? "autolaunch-waiting" : ""%> <%=item.autolaunch_blocked ? "autolaunch-blocked" : ""%>' role='link' tabindex='0'>
           <h3>
             <div class='item-icon'>
               <% if (item.icon) { %>
@@ -1960,23 +2025,467 @@ if (homeSortSelect) {
   })
 }
 <% if (ishome) { %>
-// if launch_complete is true => already finished launching so no need to refresh
-// if launch_complete is false => not finished launching. wait until it's complete, and then refresh
-// autolaunch display update
-<% if (!launch_complete) { %>
-//  let interval = setInterval(async () => {
-//    let res = await fetch("/pinokio/info").then((res) => {
-//      return res.json()
-//    })
-//    if (res.launch_complete) {
-//      console.log("launched")
-//      clearInterval(interval)
-//      location.href = location.href
-//    } else {
-//      console.log("not yet launched")
-//    }
-//  }, 1000)
-<% } %>
+// Autolaunch display update. It is always installed on home because startup
+// status can appear after the initial HTML render.
+let refreshHomeStatusOnce = null
+const startHomeAutolaunchPolling = () => {
+  const getStartingLines = () => Array.from(document.querySelectorAll('[data-autolaunch-starting="1"]'))
+  const hasVisibleStartupRows = () => getStartingLines().length > 0
+  const initialLaunchComplete = <%= launch_complete ? "true" : "false" %>
+  const getHomeAppLines = () => Array.from(document.querySelectorAll(".home-app-line[data-autolaunch-app]"))
+  const activeHomeAutolaunchApps = new Set()
+  const isPreparingAutolaunchState = (status) => {
+    return !!(status && status.state !== "ready")
+  }
+  const ownerIds = (status) => {
+    if (!status) {
+      return []
+    }
+    const ids = []
+    const add = (value) => {
+      const id = String(value || "").trim()
+      if (id && !ids.includes(id)) {
+        ids.push(id)
+      }
+    }
+    if (Array.isArray(status.owner_app_ids)) {
+      status.owner_app_ids.forEach(add)
+    }
+    add(status.owner_app_id)
+    return ids
+  }
+  const hasActiveOwner = (status, apps, runningApps) => {
+    const owners = ownerIds(status)
+    return owners.length === 0 || owners.some((ownerId) => !!apps[ownerId] || runningApps.has(ownerId))
+  }
+  const shouldDisplayAutolaunchStatus = (app, status, apps, runningApps) => {
+    if (!status) {
+      return false
+    }
+    if (runningApps.has(app)) {
+      return true
+    }
+    return isPreparingAutolaunchState(status) && hasActiveOwner(status, apps, runningApps)
+  }
+  const getAutolaunchLines = (state) => {
+    const lines = new Set(getStartingLines())
+    const apps = state && state.autolaunch && state.autolaunch.apps ? state.autolaunch.apps : {}
+    const runningApps = new Set(Array.isArray(state && state.running_apps) ? state.running_apps : [])
+    const trackedApps = new Set(Object.entries(apps)
+      .filter(([app, status]) => shouldDisplayAutolaunchStatus(app, status, apps, runningApps))
+      .map(([app]) => app))
+    for (const app of runningApps) {
+      trackedApps.add(app)
+    }
+    for (const app of activeHomeAutolaunchApps) {
+      trackedApps.add(app)
+    }
+    if (trackedApps.size > 0) {
+      for (const line of getHomeAppLines()) {
+        if (trackedApps.has(line.getAttribute("data-autolaunch-app"))) {
+          lines.add(line)
+        }
+      }
+    }
+    return Array.from(lines)
+  }
+  let attempts = 0
+  const maxPollAttempts = 240
+  let interval = null
+  let hadStartingLines = getStartingLines().length > 0
+  const stopPolling = () => {
+    if (interval) {
+      clearInterval(interval)
+      interval = null
+    }
+  }
+  const scriptIdentity = (script) => {
+    if (!script) {
+      return ""
+    }
+    return script.home_path || script.id || script.path || script.script_path || ""
+  }
+  const scriptName = (script) => {
+    return (script && (script.script_path || script.name || script.path)) || "script"
+  }
+  const scriptStepLabel = (source) => {
+    const stepCurrent = Number(source && source.step_current)
+    const stepTotal = Number(source && source.step_total)
+    if (!Number.isFinite(stepCurrent) || !Number.isFinite(stepTotal) || stepCurrent <= 0 || stepTotal <= 1) {
+      return ""
+    }
+    return ` (${stepCurrent}/${stepTotal})`
+  }
+  const scriptMatches = (script, expected) => {
+    const name = scriptName(script)
+    return !!expected && (name === expected || String(name).endsWith(`/${expected}`))
+  }
+  const syncStopButtonSpinner = (button, show) => {
+    let spinner = button.querySelector(".home-stop-spinner")
+    if (show) {
+      if (!spinner) {
+        spinner = document.createElement("i")
+        spinner.className = "home-stop-spinner fa-solid fa-spin fa-circle-notch"
+        spinner.setAttribute("aria-hidden", "true")
+        button.appendChild(spinner)
+      }
+    } else if (spinner) {
+      spinner.remove()
+    }
+  }
+  const createStopButton = (script, displayLabel = "") => {
+    const label = (script && (script.script_path || script.path)) || "script"
+    const button = document.createElement("button")
+    button.type = "button"
+    button.className = "btn shutdown"
+    button.title = `Stop ${label}`
+    button.setAttribute("aria-label", `Stop ${label}`)
+    if (script && script.home_path) {
+      button.setAttribute("data-src", script.home_path)
+    } else if (script && script.id) {
+      button.setAttribute("data-id", script.id)
+    }
+
+    const stopIcon = document.createElement("i")
+    stopIcon.className = "fa-solid fa-stop"
+    stopIcon.setAttribute("aria-hidden", "true")
+    button.appendChild(stopIcon)
+
+    const text = document.createElement("span")
+    text.textContent = displayLabel || `Stop ${label}`
+    button.appendChild(text)
+
+    syncStopButtonSpinner(button, !!displayLabel)
+    return button
+  }
+  const updateStopButton = (button, script, displayLabel = "") => {
+    const label = (script && (script.script_path || script.path)) || "script"
+    button.title = `Stop ${label}`
+    button.setAttribute("aria-label", `Stop ${label}`)
+    const text = button.querySelector("span")
+    if (text) {
+      text.textContent = displayLabel || `Stop ${label}`
+    }
+    syncStopButtonSpinner(button, !!displayLabel)
+  }
+  const syncStopButtons = (line, scripts, displayLabelForScript = null) => {
+    const menuButtons = line.querySelector(".menu-btns")
+    if (!menuButtons || !Array.isArray(scripts)) {
+      return
+    }
+    const existing = new Map(Array.from(menuButtons.querySelectorAll(".shutdown")).map((button) => {
+      return [button.getAttribute("data-src") || button.getAttribute("data-id") || "", button]
+    }))
+    const active = new Set()
+    for (const script of scripts) {
+      const identity = scriptIdentity(script)
+      if (!identity) {
+        continue
+      }
+      active.add(identity)
+      const displayLabel = typeof displayLabelForScript === "function"
+        ? displayLabelForScript(script)
+        : displayLabelForScript
+      const button = existing.get(identity)
+      if (button) {
+        updateStopButton(button, script, displayLabel || "")
+      } else {
+        menuButtons.appendChild(createStopButton(script, displayLabel || ""))
+      }
+    }
+    for (const [identity, button] of existing) {
+      if (!active.has(identity)) {
+        button.remove()
+      }
+    }
+  }
+  const updateHomeActionStatus = (line, label, starting = false) => {
+    const menuButton = line.querySelector(".open-actions-modal")
+    const dialogId = menuButton ? menuButton.getAttribute("data-dialog-id") : ""
+    const dialog = dialogId ? document.getElementById(dialogId) : null
+    if (!dialog) {
+      return
+    }
+    let status = dialog.querySelector(".home-actions-status")
+    if (!label) {
+      if (status) {
+        status.remove()
+      }
+      dialog.querySelectorAll("[data-disable]").forEach((control) => control.removeAttribute("data-disable"))
+      return
+    }
+    if (!status) {
+      status = document.createElement("span")
+      status.className = "home-actions-status"
+      const titleRow = dialog.querySelector(".home-actions-title-row")
+      if (titleRow) {
+        titleRow.appendChild(status)
+      }
+    }
+    status.textContent = label
+    status.title = label
+    status.classList.toggle("home-actions-status--starting", starting)
+  }
+  const clearStartingVisuals = (line) => {
+    line.setAttribute("data-autolaunch-starting", "0")
+    line.classList.remove("autolaunch-starting")
+    line.classList.remove("autolaunch-waiting")
+    line.classList.remove("autolaunch-blocked")
+    const titleIcon = line.querySelector(".title > i")
+    if (titleIcon) {
+      titleIcon.className = "fa-solid fa-circle"
+      titleIcon.removeAttribute("title")
+    }
+    const status = line.querySelector(".home-autolaunch-status")
+    if (status) {
+      status.remove()
+    }
+  }
+  const getOrCreateRunningSection = () => {
+    let section = document.querySelector(".running-apps")
+    if (section) {
+      return section
+    }
+    section = document.createElement("div")
+    section.className = "running-apps"
+    const notRunningSection = document.querySelector(".not-running-apps")
+    if (notRunningSection) {
+      notRunningSection.insertAdjacentElement("beforebegin", section)
+    } else {
+      const placeholder = document.querySelector(".placeholder")
+      if (placeholder) {
+        placeholder.insertAdjacentElement("beforebegin", section)
+      }
+    }
+    return section
+  }
+  const markAutolaunchRunning = (line, scripts) => {
+    activeHomeAutolaunchApps.add(line.getAttribute("data-autolaunch-app"))
+    clearStartingVisuals(line)
+    updateHomeActionStatus(line, "Running")
+    syncStopButtons(line, scripts)
+    const runningSection = getOrCreateRunningSection()
+    if (runningSection) {
+      runningSection.appendChild(line)
+    }
+  }
+  const getOrCreateNotRunningSection = () => {
+    let section = document.querySelector(".not-running-apps")
+    if (section) {
+      return section
+    }
+    section = document.createElement("div")
+    section.className = "not-running-apps"
+    const runningSection = document.querySelector(".running-apps")
+    if (runningSection) {
+      runningSection.insertAdjacentElement("afterend", section)
+    } else {
+      const placeholder = document.querySelector(".placeholder")
+      if (placeholder) {
+        placeholder.insertAdjacentElement("beforebegin", section)
+      }
+    }
+    return section
+  }
+  const markAutolaunchIdle = (line) => {
+    clearStartingVisuals(line)
+    updateHomeActionStatus(line, "")
+    syncStopButtons(line, [])
+    activeHomeAutolaunchApps.delete(line.getAttribute("data-autolaunch-app"))
+    const notRunningSection = getOrCreateNotRunningSection()
+    if (notRunningSection) {
+      notRunningSection.appendChild(line)
+    }
+  }
+  const autolaunchDependencyLabel = (autolaunch, dependencyId) => {
+    const apps = autolaunch && autolaunch.apps ? autolaunch.apps : {}
+    const status = apps[dependencyId]
+    return status && status.title ? status.title : dependencyId
+  }
+  const updateAutolaunchWaitingVisuals = (line, status, autolaunch, runningScripts = []) => {
+    if (!status) return
+    hadStartingLines = true
+    activeHomeAutolaunchApps.add(line.getAttribute("data-autolaunch-app"))
+    let label = "Starting automatically"
+    let iconClass = "fa-solid fa-circle-notch fa-spin"
+    let showStatusChip = true
+    line.setAttribute("data-autolaunch-starting", "1")
+    line.classList.add("autolaunch-starting")
+    if (status.script) {
+      line.setAttribute("data-autolaunch-script", status.script)
+    }
+    const waitingFor = Array.isArray(status.waiting_for) ? status.waiting_for : []
+    if (waitingFor.length > 0 && !["ready", "blocked"].includes(status.state || "")) {
+      label = `Waiting for ${waitingFor.map((id) => autolaunchDependencyLabel(autolaunch, id)).join(", ")}`
+      updateHomeActionStatus(line, label, true)
+      line.classList.add("autolaunch-waiting")
+      line.classList.remove("autolaunch-blocked")
+    } else if (status.state === "blocked") {
+      label = status.blocked_reason || "Startup blocked"
+      iconClass = "fa-solid fa-triangle-exclamation"
+      updateHomeActionStatus(line, label, true)
+      line.classList.add("autolaunch-blocked")
+      line.classList.remove("autolaunch-waiting")
+    } else {
+      const expectedScript = status.script || line.getAttribute("data-autolaunch-script") || ""
+      const matchingScript = Array.isArray(runningScripts)
+        ? runningScripts.find((script) => scriptMatches(script, expectedScript))
+        : null
+      const statusHasProgress = status && Number.isFinite(Number(status.step_current)) && Number.isFinite(Number(status.step_total))
+      const progressSource = statusHasProgress ? status : matchingScript
+      label = expectedScript ? `Starting ${expectedScript}${scriptStepLabel(progressSource)}` : "Starting automatically"
+      updateHomeActionStatus(line, label, true)
+      line.classList.remove("autolaunch-waiting")
+      line.classList.remove("autolaunch-blocked")
+      if (matchingScript) {
+        syncStopButtons(line, runningScripts, (script) => {
+          return scriptMatches(script, expectedScript) ? label : ""
+        })
+        showStatusChip = false
+      }
+    }
+    let chip = line.querySelector(".home-autolaunch-status")
+    if (!showStatusChip) {
+      if (chip) {
+        chip.remove()
+      }
+      return
+    }
+    if (!chip) {
+      const menuButtons = line.querySelector(".menu-btns")
+      if (!menuButtons) {
+        return
+      }
+      chip = document.createElement("span")
+      chip.className = "home-autolaunch-status"
+      chip.innerHTML = '<i class="fa-solid" aria-hidden="true"></i><span></span>'
+      menuButtons.appendChild(chip)
+    }
+    if (chip) {
+      chip.title = label
+      const icon = chip.querySelector("i")
+      if (icon) {
+        icon.className = iconClass
+      }
+      const text = chip.querySelector("span")
+      if (text) {
+        text.textContent = label
+      }
+    }
+  }
+  const applyHomeStatus = (state) => {
+    const lines = getAutolaunchLines(state)
+    if (lines.length === 0) {
+      return
+    }
+    const runningApps = new Set(Array.isArray(state.running_apps) ? state.running_apps : [])
+    const scriptsByApp = new Map()
+    for (const script of Array.isArray(state.running_scripts) ? state.running_scripts : []) {
+      if (!script || !script.app) {
+        continue
+      }
+      if (!scriptsByApp.has(script.app)) {
+        scriptsByApp.set(script.app, [])
+      }
+      scriptsByApp.get(script.app).push(script)
+    }
+    const autolaunch = state.autolaunch || {}
+    const apps = autolaunch.apps || {}
+    for (const line of lines) {
+      const app = line.getAttribute("data-autolaunch-app")
+      const autolaunchState = apps[app]
+      const runningScripts = scriptsByApp.get(app) || []
+      if (autolaunchState && !shouldDisplayAutolaunchStatus(app, autolaunchState, apps, runningApps)) {
+        markAutolaunchIdle(line)
+      } else if (isPreparingAutolaunchState(autolaunchState)) {
+        updateAutolaunchWaitingVisuals(line, autolaunchState, autolaunch, runningScripts)
+      } else if (runningApps.has(app)) {
+        markAutolaunchRunning(line, runningScripts)
+      } else if (state.launch_complete) {
+        markAutolaunchIdle(line)
+      } else {
+        updateAutolaunchWaitingVisuals(line, autolaunchState, autolaunch, runningScripts)
+      }
+    }
+    if (getStartingLines().length === 0) {
+      if (hadStartingLines) {
+        hadStartingLines = false
+        reorderHomeSectionsByPreference()
+      }
+    }
+  }
+  const requestHomeStatus = () => {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest()
+      xhr.open("GET", `/pinokio/home_status?t=${Date.now()}`, true)
+      xhr.setRequestHeader("Cache-Control", "no-cache")
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState !== 4) {
+          return
+        }
+        if (xhr.status >= 200 && xhr.status < 300) {
+          try {
+            resolve(JSON.parse(xhr.responseText))
+          } catch (error) {
+            reject(error)
+          }
+        } else {
+          reject(new Error(`home_status ${xhr.status}`))
+        }
+      }
+      xhr.onerror = () => reject(new Error("home_status request failed"))
+      xhr.send()
+    })
+  }
+  refreshHomeStatusOnce = (appId = "") => {
+    const trackedApp = String(appId || "").trim()
+    if (trackedApp) {
+      activeHomeAutolaunchApps.add(trackedApp)
+    }
+    return requestHomeStatus().then((state) => {
+      applyHomeStatus(state)
+      return state
+    })
+  }
+  window.refreshHomeStatusOnce = refreshHomeStatusOnce
+  if (initialLaunchComplete && !hasVisibleStartupRows()) {
+    return
+  }
+  const shouldContinueHomeStatusPolling = (state) => {
+    if (attempts >= maxPollAttempts) {
+      return false
+    }
+    if (hasVisibleStartupRows()) {
+      return true
+    }
+    return !(state && state.launch_complete)
+  }
+  const poll = async () => {
+    attempts += 1
+    try {
+      const state = await refreshHomeStatusOnce()
+      if (!shouldContinueHomeStatusPolling(state)) {
+        stopPolling()
+      }
+    } catch (error) {
+      console.warn("[home] autolaunch status update failed", error)
+      if (attempts >= maxPollAttempts) {
+        stopPolling()
+      }
+    }
+  }
+  interval = setInterval(poll, 500)
+  setTimeout(poll, 100)
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "visible") {
+      poll()
+    }
+  })
+  window.addEventListener("beforeunload", () => {
+    stopPolling()
+  })
+}
+startHomeAutolaunchPolling()
 document.addEventListener("keydown", (e) => {
   e = e || window.event;
   if (e.key === "ArrowUp") {
@@ -2507,7 +3016,10 @@ document.addEventListener("click", async (e) => {
         if (packet.type === "result") {
           socket.close()
           target.querySelector("i.fa-stop").className = "fa-solid fa-check"
-          target.querySelector("i.fa-spin").classList.add("hidden")
+          const resultSpinIcon = target.querySelector("i.fa-spin")
+          if (resultSpinIcon) {
+            resultSpinIcon.classList.add("hidden")
+          }
           n.Noty({
             text: `stopped`,
             silent: true
@@ -2526,13 +3038,25 @@ document.addEventListener("click", async (e) => {
         if (packet.type === "result") {
           socket.close()
           target.querySelector("i.fa-stop").className = "fa-solid fa-check"
-          target.querySelector("i.fa-spin").classList.add("hidden")
+          const resultSpinIcon = target.querySelector("i.fa-spin")
+          if (resultSpinIcon) {
+            resultSpinIcon.classList.add("hidden")
+          }
           n.Noty({
             text: `stopped ${src}`,
             silent: true
           })
           setTimeout(() => {
-            location.href = location.href
+            if (typeof refreshHomeStatusOnce === "function") {
+              const stoppedLine = target.closest(".home-app-line")
+              const stoppedApp = stoppedLine ? stoppedLine.getAttribute("data-autolaunch-app") : ""
+              refreshHomeStatusOnce(stoppedApp).catch((error) => {
+                console.warn("[home] stop status refresh failed", error)
+                location.href = location.href
+              })
+            } else {
+              location.href = location.href
+            }
           }, 500)
         }
       })