pinokiod 7.3.15 → 7.4.1

package/server/views/app.ejs

@@ -19,6 +19,7 @@
 <% if (agent === "electron") { %>
   <link href="/electron.css" rel="stylesheet"/>
 <% } %>
+<% const appMobileBreakpointPx = 980 %>
 <style>
 :root {
   --assist-surface-light: var(--pinokio-chrome-accent-bg-light);
@@ -603,6 +604,7 @@ body.dark .browserview-network-status {
   color: rgba(248, 250, 252, 0.9);
   background: var(--app-page-canvas-bg, #1b1c1d);
 }
+<%- include('./partials/launch_requirements_status_styles') %>
 .browserview-network-status-inner {
   display: flex;
   flex-direction: column;
@@ -3685,6 +3687,11 @@ body.dark .disk-usage {
   text-overflow: ellipsis;
   color: var(--pinokio-sidebar-tab-muted);
 }
+.app-autolaunch-label > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .app-autolaunch-label i {
   width: 16px;
   flex: 0 0 16px;
@@ -3702,6 +3709,7 @@ body.dark .disk-usage {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.02em;
+  white-space: nowrap;
 }
 .app-autolaunch-row[data-enabled="true"] .app-autolaunch-status {
   color: rgba(22, 101, 52, 0.95);
@@ -3793,6 +3801,21 @@ body.dark .app-autolaunch-empty {
   gap: 8px;
   flex: 0 0 auto;
 }
+.app-autolaunch-switch-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+.app-autolaunch-switch-caption {
+  color: rgba(100, 116, 139, 0.95);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+}
+body.dark .app-autolaunch-switch-caption {
+  color: rgba(148, 163, 184, 0.95);
+}
 .app-autolaunch-close {
   display: inline-flex;
   align-items: center;
@@ -3914,10 +3937,42 @@ body.dark .app-autolaunch-section-label {
 .app-autolaunch-script-option > div {
   min-width: 0;
 }
+.app-autolaunch-clear-script {
+  min-height: 32px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 6px;
+  background: transparent;
+  color: rgba(100, 116, 139, 0.95);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 9px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.app-autolaunch-clear-script:hover {
+  background: rgba(148, 163, 184, 0.16);
+  color: rgba(15, 23, 42, 0.9);
+}
+.app-autolaunch-clear-script:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
 body.dark .app-autolaunch-script-option {
   border-color: rgba(148, 163, 184, 0.16);
   background: rgba(15, 23, 42, 0.72);
 }
+body.dark .app-autolaunch-clear-script {
+  border-color: rgba(148, 163, 184, 0.16);
+  color: rgba(203, 213, 225, 0.9);
+}
+body.dark .app-autolaunch-clear-script:hover {
+  background: rgba(148, 163, 184, 0.16);
+  color: rgba(226, 232, 240, 0.92);
+}
 body.dark .app-autolaunch-script-option:hover,
 body.dark .app-autolaunch-script-option.selected {
   border-color: rgba(96, 165, 250, 0.42);
@@ -3951,6 +4006,7 @@ body.dark .app-autolaunch-tag {
   background: rgba(148, 163, 184, 0.18);
   color: rgba(203, 213, 225, 0.9);
 }
+<%- include('partials/app_autolaunch_dependency_styles') %>
 .app-autolaunch-footer {
   display: flex;
   align-items: center;
@@ -6114,7 +6170,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
   }
 }
 */
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: <%= appMobileBreakpointPx %>px) {
   body {
     display: flex !important;
     flex-direction: row !important;
@@ -6355,7 +6411,7 @@ header.navheader h1 {
     margin: 0 10px;
   }
 }
-	@media only screen and (max-width: 768px) {
+	@media only screen and (max-width: <%= appMobileBreakpointPx %>px) {
 	  :root {
 	    --mobile-bottom-bar-height: calc(46px + env(safe-area-inset-bottom));
 	  }
@@ -7884,13 +7940,16 @@ body.dark .pinokio-custom-terminal-header {
                 <div class="app-autolaunch-modal-head">
                   <div>
                     <div class="app-autolaunch-title">Autolaunch</div>
-                    <div class="app-autolaunch-note">Run this app when Pinokio starts.</div>
+                    <div class="app-autolaunch-note">Choose launch script, startup behavior, and requirements.</div>
                   </div>
                   <div class="app-autolaunch-modal-actions">
-                    <button type="button" class="app-autolaunch-switch" role="switch" aria-checked="<%= autolaunch_app.autolaunch_enabled ? 'true' : 'false' %>" data-app-autolaunch-switch aria-label="Autolaunch" title="Autolaunch is <%= autolaunch_app.autolaunch_enabled ? 'on' : 'off' %>">
-                      <span class="app-autolaunch-switch-label" data-app-autolaunch-switch-label><%= autolaunch_app.autolaunch_enabled ? 'ON' : 'OFF' %></span>
-                      <span class="app-autolaunch-switch-thumb" aria-hidden="true"></span>
-                    </button>
+                    <div class="app-autolaunch-switch-group">
+                      <span class="app-autolaunch-switch-caption">Start with Pinokio</span>
+                      <button type="button" class="app-autolaunch-switch" role="switch" aria-checked="<%= autolaunch_app.autolaunch_enabled ? 'true' : 'false' %>" data-app-autolaunch-switch aria-label="Start with Pinokio" title="Start with Pinokio is <%= autolaunch_app.autolaunch_enabled ? 'on' : 'off' %>">
+                        <span class="app-autolaunch-switch-label" data-app-autolaunch-switch-label><%= autolaunch_app.autolaunch_enabled ? 'ON' : 'OFF' %></span>
+                        <span class="app-autolaunch-switch-thumb" aria-hidden="true"></span>
+                      </button>
+                    </div>
                     <button type="button" class="app-autolaunch-close" data-app-autolaunch-close aria-label="Close">
                       <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                     </button>
@@ -7902,6 +7961,12 @@ body.dark .pinokio-custom-terminal-header {
                     <div class="app-autolaunch-empty">Loading scripts...</div>
                   </div>
                 </div>
+                <div class="app-autolaunch-modal-section">
+                  <div class="app-autolaunch-section-label">Requires</div>
+                  <div class="app-autolaunch-dependencies" data-app-autolaunch-dependencies>
+                    <div class="app-autolaunch-empty">Loading dependencies...</div>
+                  </div>
+                </div>
                 <div class="app-autolaunch-footer">
                   <div class="app-autolaunch-feedback" data-app-autolaunch-feedback></div>
                   <a class="app-autolaunch-link" href="/autolaunch">Manage all</a>
@@ -7983,6 +8048,7 @@ body.dark .pinokio-custom-terminal-header {
           <iframe class='selected' src="<%=editor_tab%>" allow="fullscreen *;" allowfullscreen></iframe>
         <% } %>
         <div id="browserview-network-status" class="browserview-network-status" hidden aria-live="polite"></div>
+        <div id="launch-requirements-status" class="launch-requirements-status" data-launch-requirements-status hidden aria-live="polite"></div>
         <%- include('./partials/browser_popout_surface') %>
       </main>
       <% if (type === 'run') { %>
@@ -8295,6 +8361,11 @@ body.dark .pinokio-custom-terminal-header {
   let pendingSelectionRetry = null
   let pendingHomeSelectionRetry = null
   let initialWorkspaceDiskUsageRequested = false
+  const openWithoutLaunching = <%- JSON.stringify(type === "run" && !autoselect) %>
+  const appMobileBreakpoint = <%= appMobileBreakpointPx %>
+  const appMobileBreakpointQuery = `(max-width: ${appMobileBreakpoint}px)`
+  window.PinokioAppMobileBreakpoint = appMobileBreakpoint
+  window.PinokioAppMobileBreakpointQuery = appMobileBreakpointQuery
   const scheduleSelectionRetry = (delay = 100) => {
     if (pendingSelectionRetry !== null) {
       return
@@ -10004,7 +10075,9 @@ const rerenderMenuSection = (container, html) => {
         return ""
       }
     })()
-    let persistedSelectionRaw = selectionKey && storage ? storage.getItem(selectionKey) : null
+    const triggeredByUser = Boolean(eventParam || explicitTarget)
+    const automaticSelectionDisabled = openWithoutLaunching && !triggeredByUser
+    let persistedSelectionRaw = automaticSelectionDisabled ? null : (selectionKey && storage ? storage.getItem(selectionKey) : null)
     const devRouteActive = /\/dev(?:$|\/)/.test(currentPath || "")
     let persistedSelectionPayload = null
     if (persistedSelectionRaw) {
@@ -10029,9 +10102,8 @@ const rerenderMenuSection = (container, html) => {
       persistedSelectionRaw = null
     }
     const originalHasPersistedSelection = Boolean(persistedSelectionPayload)
-    const triggeredByUser = Boolean(eventParam || explicitTarget)
-    const followCurrentDefault = forceDefaultSelection && !triggeredByUser
-    const skipPersistedSelection = followCurrentDefault || (ignorePersistedSelection && Boolean(document.querySelector('[data-default]')))
+    const followCurrentDefault = !automaticSelectionDisabled && forceDefaultSelection && !triggeredByUser
+    const skipPersistedSelection = automaticSelectionDisabled || followCurrentDefault || (ignorePersistedSelection && Boolean(document.querySelector('[data-default]')))
     let hasPersistedSelection = skipPersistedSelection ? false : originalHasPersistedSelection
     if (skipPersistedSelection) {
       persistedSelectionRaw = null
@@ -10053,7 +10125,7 @@ const rerenderMenuSection = (container, html) => {
       target = eventParam.target?.closest(".frame-link") || null
     }
 
-    if (!target && global_selector) {
+    if (!target && !automaticSelectionDisabled && global_selector) {
       const candidate = document.querySelector(global_selector)
       if (candidate) {
         target = candidate
@@ -10065,11 +10137,11 @@ const rerenderMenuSection = (container, html) => {
       }
     }
 
-    if (!target && !skipPersistedSelection) {
+    if (!target && !automaticSelectionDisabled && !skipPersistedSelection) {
       preselected = document.querySelector('#devtab.frame-link.selected') || document.querySelector('.frame-link.selected')
     }
 
-    if (!target && persistedSelectionPayload) {
+    if (!target && !automaticSelectionDisabled && persistedSelectionPayload) {
       target = restorePersistedFrameLink(persistedSelectionPayload)
       if (!target && originalHasPersistedSelection) {
         scheduleSelectionRetry()
@@ -10077,7 +10149,7 @@ const rerenderMenuSection = (container, html) => {
       }
     }
 
-    if (!target && !skipPersistedSelection) {
+    if (!target && !automaticSelectionDisabled && !skipPersistedSelection) {
       const urlKey = selectionUrlStorageKey()
       const storedUrl = urlKey && storage ? storage.getItem(urlKey) : null
       if (storedUrl) {
@@ -10085,7 +10157,7 @@ const rerenderMenuSection = (container, html) => {
       }
     }
 
-    if (!target && followCurrentDefault) {
+    if (!target && !automaticSelectionDisabled && followCurrentDefault) {
       const defaultSelection = getDefaultSelection()
       if (defaultSelection) {
         target = defaultSelection
@@ -10093,11 +10165,11 @@ const rerenderMenuSection = (container, html) => {
     }
 
     const devTab = document.querySelector('#devtab.frame-link')
-    if (!target && preselected && preselected !== devTab) {
+    if (!target && !automaticSelectionDisabled && preselected && preselected !== devTab) {
       target = preselected
     }
 
-    if (!triggeredByUser && !resolvedByGlobalSelector && !target && devRouteActive && devTab) {
+    if (!automaticSelectionDisabled && !triggeredByUser && !resolvedByGlobalSelector && !target && devRouteActive && devTab) {
       const defaultCandidate = getDefaultSelection()
       if (pluginLaunchActive && defaultCandidate) {
         target = defaultCandidate
@@ -10106,7 +10178,7 @@ const rerenderMenuSection = (container, html) => {
       }
     }
 
-    if (!target && preselected) {
+    if (!target && !automaticSelectionDisabled && preselected) {
       target = preselected
     }
 
@@ -10141,7 +10213,7 @@ const rerenderMenuSection = (container, html) => {
       }
     <% } %>
 
-    if (!target && preselected) {
+    if (!target && !automaticSelectionDisabled && preselected) {
       target = preselected
     }
 
@@ -10278,7 +10350,6 @@ const rerenderMenuSection = (container, html) => {
       eventParam.preventDefault()
       eventParam.stopPropagation()
     }
-
     // save target.href
     <% if (type !== "run") { %>
       let _url = new URL(target.href)
@@ -10372,7 +10443,7 @@ const rerenderMenuSection = (container, html) => {
 		      writeFrameInjectDescriptors(targetFrame, targetInjectDescriptors)
 	      publishBrowserviewInjectTargets([], { sync: true })
 	      targetFrame.classList.remove("hidden")
-	      let mode = target.getAttribute("data-mode")
+      let mode = target.getAttribute("data-mode")
       if (mode === "refresh") {
         if (targetFrame.src !== target.href) {
           targetFrame.src = target.href
@@ -11031,14 +11102,12 @@ const rerenderMenuSection = (container, html) => {
   }
 
 
-
-
-	  const mobileMenuQuery = window.matchMedia ? window.matchMedia("(max-width: 768px)") : null
+	  const mobileMenuQuery = window.matchMedia ? window.matchMedia(appMobileBreakpointQuery) : null
 	  const isMobileMenuOpen = () => document.body.classList.contains("mobile-menu-open")
 	  const appcanvas = document.querySelector(".appcanvas")
 	  const closeWindowButton = document.querySelector("#close-window")
 	  const mobileMenuBackdrop = document.querySelector("[data-mobile-menu-backdrop]")
-	  const isMobilePanelLayout = () => mobileMenuQuery ? mobileMenuQuery.matches : window.innerWidth <= 768
+	  const isMobilePanelLayout = () => mobileMenuQuery ? mobileMenuQuery.matches : window.innerWidth <= appMobileBreakpoint
 	  const normalizeMobilePanelName = (value) => {
 	    return value === "logs" || value === "ask-ai" || value === "feed" ? value : ""
 	  }
@@ -11778,7 +11847,7 @@ const rerenderMenuSection = (container, html) => {
   if (appcanvas && sidebarResizer && sidebarContainer) {
       const SIDEBAR_MIN_WIDTH = 140
       const SIDEBAR_MAX_WIDTH = 560
-      const sidebarMobileQuery = window.matchMedia ? window.matchMedia("(max-width: 768px)") : null
+      const sidebarMobileQuery = window.matchMedia ? window.matchMedia(appMobileBreakpointQuery) : null
       const workspaceName = "<%= typeof name === 'string' ? name : '' %>"
       const sidebarWidthStorageKey = workspaceName
         ? `pinokio-app-sidebar-width:${workspaceName}`
@@ -17796,7 +17865,7 @@ document.addEventListener("DOMContentLoaded", () => {
     enabled = false
   }
 
-  const communityModeQuery = window.matchMedia ? window.matchMedia("(max-width: 768px)") : null
+  const communityModeQuery = window.matchMedia ? window.matchMedia(window.PinokioAppMobileBreakpointQuery || "(max-width: <%= appMobileBreakpointPx %>px)") : null
   let communityMode = false
 
   const setCommunityMode = (next, opts) => {
@@ -18480,6 +18549,8 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 })()
 
+<%- include('partials/launch_requirements_status_client') %>
+
 ;(function() {
   const root = document.querySelector("[data-app-autolaunch]")
   const initialState = <%- JSON.stringify((typeof autolaunch_app !== "undefined" && autolaunch_app) ? autolaunch_app : null).replace(/</g, "\\u003c") %>
@@ -18493,8 +18564,9 @@ document.addEventListener("DOMContentLoaded", () => {
   const switchLabel = root.querySelector("[data-app-autolaunch-switch-label]")
   const closeButton = root.querySelector("[data-app-autolaunch-close]")
   const scriptsEl = root.querySelector("[data-app-autolaunch-scripts]")
+  const dependenciesEl = root.querySelector("[data-app-autolaunch-dependencies]")
   const feedbackEl = root.querySelector("[data-app-autolaunch-feedback]")
-  if (!appId || !button || !status || !modal || !switchButton || !switchLabel || !closeButton || !scriptsEl || !feedbackEl) return
+  if (!appId || !button || !status || !modal || !switchButton || !switchLabel || !closeButton || !scriptsEl || !dependenciesEl || !feedbackEl) return
 
   let state = Object.assign({}, initialState)
   let candidateState = null
@@ -18502,6 +18574,13 @@ document.addEventListener("DOMContentLoaded", () => {
   let selectedScript = state.autolaunch || ""
   let loadingCandidates = false
   let saving = false
+  let savingDependencies = false
+  let savingDependencyScript = false
+  let dependencyPickerOpen = false
+  let dependencyScriptPickerOpen = ""
+  let pendingDependencyId = ""
+  let dependencyScriptCandidates = {}
+  let dependencyScriptSelections = {}
 
   const escapeHtml = (value) => {
     if (value === null || value === undefined) return ""
@@ -18520,124 +18599,17 @@ document.addEventListener("DOMContentLoaded", () => {
     if (!candidateState) return []
     return [].concat(candidateState.menu || [], candidateState.other || [])
   }
-  const chooseInitialScript = (data) => {
-    const candidates = data ? [].concat(data.menu || [], data.other || []) : []
-    if (data && data.current) return data.current
-    const defaultCandidate = candidates.find((candidate) => candidate && candidate.menu_default)
-    if (defaultCandidate) return defaultCandidate.script
-    return candidates.length > 0 ? candidates[0].script : ""
-  }
-  const setFeedback = (message, isError = false) => {
-    feedbackEl.textContent = message || ""
-    feedbackEl.classList.toggle("error", !!isError)
-  }
-  const setBusy = (busy) => {
-    saving = !!busy
-    switchButton.disabled = saving || loadingCandidates
-    button.toggleAttribute("aria-busy", saving)
-    scriptsEl.querySelectorAll("input").forEach((input) => {
-      input.disabled = saving
-    })
-  }
-  const renderStatus = () => {
-    const enabled = !!(state && state.autolaunch_enabled)
-    status.textContent = enabled ? "ON" : "OFF"
-    button.dataset.enabled = enabled ? "true" : "false"
-    button.setAttribute("aria-label", `Auto launch ${enabled ? "On" : "Off"}`)
-    switchButton.setAttribute("aria-checked", enabled ? "true" : "false")
-    switchButton.title = `Auto launch is ${enabled ? "on" : "off"}`
-    switchLabel.textContent = enabled ? "ON" : "OFF"
-    root.classList.toggle("enabled", enabled)
-  }
-  const setOpen = (open) => {
-    root.classList.toggle("open", !!open)
-    button.setAttribute("aria-expanded", open ? "true" : "false")
-    modal.classList.toggle("hidden", !open)
-    if (open) {
-      if (!candidateState && !loadingCandidates) {
-        loadCandidates()
-      }
-      window.setTimeout(() => {
-        if (!modal.classList.contains("hidden")) {
-          switchButton.focus()
-        }
-      }, 0)
-    } else {
-      button.focus()
-    }
-  }
-  const renderScripts = () => {
-    if (loadingCandidates) {
-      scriptsEl.innerHTML = '<div class="app-autolaunch-empty">Loading scripts...</div>'
-      setBusy(false)
-      return
-    }
-    if (candidateError) {
-      scriptsEl.innerHTML = `<div class="app-autolaunch-empty">${escapeHtml(candidateError)}</div>`
-      setBusy(false)
-      return
-    }
-    if (!candidateState) {
-      scriptsEl.innerHTML = '<div class="app-autolaunch-empty">Open to load scripts.</div>'
-      setBusy(false)
-      return
-    }
-    const candidates = allCandidates().slice()
-    const current = candidateState.current || state.autolaunch || ""
-    if (current && !candidates.some((candidate) => candidate && candidate.script === current)) {
-      candidates.unshift({
-        script: current,
-        label: "Current",
-        source: "current",
-        current: true
-      })
-    }
-    if (!selectedScript) {
-      selectedScript = chooseInitialScript(candidateState)
-    }
-    if (candidates.length === 0) {
-      scriptsEl.innerHTML = '<div class="app-autolaunch-empty">No local scripts were found for this app.</div>'
-      setBusy(false)
-      return
-    }
-    scriptsEl.innerHTML = candidates.map((candidate) => {
-      const script = candidate && candidate.script ? candidate.script : ""
-      if (!script) return ""
-      const label = candidate.label || script
-      const checked = script === selectedScript ? "checked" : ""
-      const selected = script === selectedScript ? " selected" : ""
-      const tags = [
-        candidate.current ? '<span class="app-autolaunch-tag">Current</span>' : "",
-        candidate.menu_default ? '<span class="app-autolaunch-tag">Default</span>' : "",
-        candidate.has_params ? '<span class="app-autolaunch-tag">Params ignored</span>' : ""
-      ].filter(Boolean).join("")
-      const pathLine = label === script
-        ? ""
-        : `<div class="app-autolaunch-script-path" title="${escapeHtml(script)}">${escapeHtml(script)}</div>`
-      return `
-        <label class="app-autolaunch-script-option${selected}">
-          <input type="radio" name="app-autolaunch-script" value="${escapeHtml(script)}" ${checked}>
-          <div>
-            <div class="app-autolaunch-script-title"><span>${escapeHtml(label)}</span>${tags}</div>
-            ${pathLine}
-          </div>
-        </label>
-      `
-    }).join("")
-    setBusy(false)
-  }
-  const syncState = (updated) => {
-    if (updated) {
-      state = Object.assign({}, state, updated)
-      if (candidateState) {
-        candidateState.app = Object.assign({}, candidateState.app || {}, updated)
-        candidateState.current = updated.autolaunch || ""
-      }
-      if (updated.autolaunch) {
-        selectedScript = updated.autolaunch
-      }
-    }
-    renderStatus()
+  <%- include('partials/app_autolaunch_modal_helpers') %>
+	  const hasLaunchRequirementConfig = () => {
+	    return !!(
+	      state.autolaunch &&
+	      Array.isArray(state.autolaunch_depends) &&
+	      state.autolaunch_depends.length > 0
+	    )
+	  }
+  const notifyLaunchRequirementsConfigured = () => {
+    if (!hasLaunchRequirementConfig()) return
+    window.dispatchEvent(new CustomEvent("pinokio:launch-requirements-configured"))
   }
   const loadCandidates = async () => {
     loadingCandidates = true
@@ -18654,16 +18626,84 @@ document.addEventListener("DOMContentLoaded", () => {
       }
       candidateState = data
       syncState(data.app)
-      selectedScript = chooseInitialScript(data)
+      selectedScript = configuredScript(data)
       setFeedback("")
     } catch (error) {
       candidateError = error && error.message ? error.message : "Failed to load scripts."
     } finally {
       loadingCandidates = false
       renderScripts()
+      renderDependencies()
     }
   }
-  const saveScript = async (script) => {
+  <%- include('partials/app_autolaunch_dependency_save') %>
+  const updateDependencyCandidateState = (updatedApp) => {
+    if (!updatedApp || !updatedApp.id || !candidateState || !Array.isArray(candidateState.dependency_apps)) return
+    candidateState.dependency_apps = candidateState.dependency_apps.map((app) => app.id === updatedApp.id ? updatedApp : app)
+  }
+  <%- include('partials/launch_settings_dependency_script_loader_factory') %>
+  const loadDependencyScriptCandidates = createLaunchSettingsDependencyScriptLoader({
+    getCache: () => dependencyScriptCandidates,
+    render: renderDependencies
+  })
+  const saveDependencyScript = async (dependencyId, script) => {
+    const dependency = dependencyById(dependencyId)
+    if (!dependency || !script || savingDependencyScript) return
+    savingDependencyScript = true
+    setBusy(true)
+    setFeedback("Saving requirement script...")
+    try {
+      const response = await fetch("/autolaunch", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Accept": "application/json"
+        },
+        body: JSON.stringify({
+          app: dependencyId,
+          script,
+          enabled: !!dependency.autolaunch_enabled
+        })
+      })
+      const data = await response.json()
+      if (!response.ok || !data.ok) {
+        throw new Error(data.error || "Failed to save launch script.")
+      }
+      updateDependencyCandidateState(data.app)
+      if (pendingDependencyId === dependencyId) {
+	        const dependencies = Array.isArray(state.autolaunch_depends) ? state.autolaunch_depends.slice() : []
+	        if (!dependencies.includes(dependencyId)) {
+	          const savedDependency = await saveDependencies(dependencies.concat(dependencyId), "Requirement saved.")
+	          if (savedDependency) {
+	            notifyLaunchRequirementsConfigured()
+	            pendingDependencyId = ""
+	            delete dependencyScriptSelections[dependencyId]
+	            dependencyScriptPickerOpen = ""
+	            renderDependencies()
+	          }
+	        } else {
+	          pendingDependencyId = ""
+	          delete dependencyScriptSelections[dependencyId]
+	          dependencyScriptPickerOpen = ""
+	          renderDependencies()
+	          notifyLaunchRequirementsConfigured()
+	          setFeedback("Requirement saved.")
+	        }
+	      } else {
+	        dependencyScriptPickerOpen = ""
+	        delete dependencyScriptSelections[dependencyId]
+	        renderDependencies()
+	        setFeedback("Requirement script saved.")
+	      }
+    } catch (error) {
+      setFeedback(error && error.message ? error.message : "Failed to save launch script.", true)
+      renderDependencies()
+    } finally {
+      savingDependencyScript = false
+      setBusy(false)
+    }
+  }
+  const saveScript = async (script, enabled = !!state.autolaunch_enabled) => {
     if (saving) return
     setBusy(true)
     setFeedback(script ? "Saving..." : "Disabling...")
@@ -18674,17 +18714,52 @@ document.addEventListener("DOMContentLoaded", () => {
           "Content-Type": "application/json",
           "Accept": "application/json"
         },
-        body: JSON.stringify({ app: appId, script: script || "" })
+        body: JSON.stringify({ app: appId, script: script || "", enabled: !!enabled })
+      })
+      const data = await response.json()
+      if (!response.ok || !data.ok) {
+        throw new Error(data.error || "Failed to save Autolaunch settings.")
+      }
+      syncState(data.app)
+      notifyLaunchRequirementsConfigured()
+      setFeedback(data.app && data.app.autolaunch_enabled ? "Saved." : (script ? "Launch script saved." : "Disabled."))
+      renderScripts()
+      renderDependencies()
+    } catch (error) {
+      setFeedback(error && error.message ? error.message : "Failed to save Autolaunch settings.", true)
+      renderStatus()
+    } finally {
+      setBusy(false)
+    }
+  }
+  const clearScript = async () => {
+    if (saving) return
+    if (Array.isArray(state.autolaunch_depends) && state.autolaunch_depends.length > 0) {
+      setFeedback("Remove requirements before clearing this app's launch script.", true)
+      return
+    }
+    setBusy(true)
+    setFeedback("Clearing launch script...")
+    try {
+      const response = await fetch("/autolaunch", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Accept": "application/json"
+        },
+        body: JSON.stringify({ app: appId, clear_script: true })
       })
       const data = await response.json()
       if (!response.ok || !data.ok) {
-        throw new Error(data.error || "Failed to save autolaunch.")
+        throw new Error(data.error || "Failed to clear launch script.")
       }
       syncState(data.app)
-      setFeedback(data.app && data.app.autolaunch_enabled ? "Saved." : "Disabled.")
+      notifyLaunchRequirementsConfigured()
+      setFeedback("Launch script cleared.")
       renderScripts()
+      renderDependencies()
     } catch (error) {
-      setFeedback(error && error.message ? error.message : "Failed to save autolaunch.", true)
+      setFeedback(error && error.message ? error.message : "Failed to clear launch script.", true)
       renderStatus()
     } finally {
       setBusy(false)
@@ -18693,23 +18768,25 @@ document.addEventListener("DOMContentLoaded", () => {
   const toggleAutolaunch = async () => {
     if (saving || loadingCandidates) return
     if (state.autolaunch_enabled) {
-      await saveScript("")
+      const script = selectedScript || state.autolaunch || ""
+      await saveScript(script, false)
       return
     }
     if (!candidateState) {
       await loadCandidates()
     }
-    const script = selectedScript || chooseInitialScript(candidateState)
+    const script = selectedScript || ""
     if (!script) {
-      setFeedback("Choose a script first.", true)
+      setFeedback("Choose a launch script first.", true)
       return
     }
     selectedScript = script
-    await saveScript(script)
+    await saveScript(script, true)
   }
 
   renderStatus()
   renderScripts()
+  renderDependencies()
 
   button.addEventListener("click", (event) => {
     event.preventDefault()
@@ -18738,11 +18815,41 @@ document.addEventListener("DOMContentLoaded", () => {
     if (!input) return
     selectedScript = input.value
     renderScripts()
-    if (state.autolaunch_enabled && selectedScript !== state.autolaunch) {
-      saveScript(selectedScript)
+    if (selectedScript !== state.autolaunch) {
+      saveScript(selectedScript, !!state.autolaunch_enabled)
     }
   })
-  document.addEventListener("keydown", (event) => {
+  scriptsEl.addEventListener("click", (event) => {
+    const clear = event.target && event.target.closest("[data-app-autolaunch-clear-script]")
+    if (!clear) return
+    event.preventDefault()
+    clearScript()
+	  })
+	  <%- include('partials/app_autolaunch_dependency_events') %>
+	  window.addEventListener("pinokio:launch-requirements-choose-script", async (event) => {
+	    const dependency = event && event.detail ? event.detail.app : ""
+	    if (!dependency) return
+	    event.preventDefault()
+	    if (!candidateState && !loadingCandidates) {
+	      await loadCandidates()
+	    }
+	    setOpen(true)
+	    pendingDependencyId = ""
+	    dependencyScriptPickerOpen = dependency
+	    const dependencyApp = dependencyById(dependency)
+	    dependencyScriptSelections[dependency] = dependencyApp && dependencyApp.autolaunch ? dependencyApp.autolaunch : ""
+	    renderDependencies()
+	    loadDependencyScriptCandidates(dependency)
+	  })
+	  ;(async () => {
+	    const params = new URLSearchParams(window.location.search || "")
+	    if (params.get("autolaunch") !== "1") return
+	    setOpen(true)
+	    if (!candidateState && !loadingCandidates) {
+	      await loadCandidates()
+	    }
+	  })()
+	  document.addEventListener("keydown", (event) => {
     if (event.key === "Escape" && !modal.classList.contains("hidden")) {
       setOpen(false)
     }