pinokiod 7.3.14 → 7.4.0

package/server/views/partials/app_autolaunch_modal_helpers.ejs

@@ -0,0 +1,347 @@
+  const dependencyOptions = () => {
+    return candidateState && Array.isArray(candidateState.dependency_apps)
+      ? candidateState.dependency_apps
+      : []
+  }
+  const dependencyById = (dependencyId) => {
+    return dependencyOptions().find((candidate) => candidate && candidate.id === dependencyId) || null
+  }
+  const dependencyFolderPath = (app) => {
+    const raw = String((app && (app.workspace_path || app.launcher_path || app.id)) || "").replace(/\\/g, "/")
+    if (!raw) return ""
+    const pinokioApiMatch = raw.match(/\/pinokio\/api\/(.+)$/i)
+    if (pinokioApiMatch && pinokioApiMatch[1]) {
+      return `~/pinokio/api/${pinokioApiMatch[1]}`
+    }
+    return raw.replace(/^\/Users\/[^/]+/, "~")
+  }
+  const dependencyFullPath = (app) => String((app && (app.workspace_path || app.launcher_path || app.id)) || "")
+  const renderDependencyOption = (candidate) => {
+    const title = candidate.title || candidate.name || candidate.id
+    const folderPath = dependencyFolderPath(candidate)
+    const fullFolderPath = dependencyFullPath(candidate)
+    const searchText = `${title} ${candidate.id || ""} ${folderPath} ${fullFolderPath}`.toLowerCase()
+    return `
+      <button type="button" class="app-autolaunch-dependency-option" data-app-autolaunch-add-dependency="${escapeHtml(candidate.id)}" data-search-text="${escapeHtml(searchText)}" title="${escapeHtml(fullFolderPath)}">
+        <img src="${escapeHtml(candidate.icon || "/pinokio-black.png")}" alt="" onerror="this.onerror=null; this.src='/pinokio-black.png'">
+        <span class="app-autolaunch-dependency-option-meta">
+          <span class="app-autolaunch-dependency-option-title">${escapeHtml(title)}</span>
+          <span class="app-autolaunch-dependency-option-path">${escapeHtml(folderPath)}</span>
+        </span>
+      </button>
+    `
+  }
+  const renderSelectedDependency = (dependencyId) => {
+    const candidate = dependencyById(dependencyId)
+    const title = candidate ? (candidate.title || candidate.name || candidate.id) : dependencyId
+    const folderPath = candidate ? dependencyFolderPath(candidate) : dependencyId
+    const fullFolderPath = candidate ? dependencyFullPath(candidate) : dependencyId
+    const script = candidate && candidate.autolaunch ? candidate.autolaunch : ""
+    const scriptLine = script
+      ? `<span class="app-autolaunch-dependency-option-path">${escapeHtml(script)}</span>`
+      : `<button type="button" class="app-autolaunch-dependency-configure" data-app-autolaunch-configure-dependency="${escapeHtml(dependencyId)}">
+          <i class="fa-solid fa-gear" aria-hidden="true"></i>
+          Missing launch script
+        </button>`
+    return `
+      <div class="app-autolaunch-dependency-row" title="${escapeHtml(fullFolderPath)}">
+        <img src="${escapeHtml((candidate && candidate.icon) || "/pinokio-black.png")}" alt="" onerror="this.onerror=null; this.src='/pinokio-black.png'">
+        <span class="app-autolaunch-dependency-option-meta">
+          <span class="app-autolaunch-dependency-option-title">${escapeHtml(title)}</span>
+          <span class="app-autolaunch-dependency-option-path">${escapeHtml(folderPath)}</span>
+          ${scriptLine}
+        </span>
+        <button type="button" class="app-autolaunch-dependency-remove" data-app-autolaunch-remove-dependency="${escapeHtml(dependencyId)}" aria-label="Remove ${escapeHtml(title)}">
+          <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+        </button>
+      </div>
+    `
+  }
+  const renderDependencyScriptModal = () => {
+    const dependencyId = dependencyScriptPickerOpen
+    if (!dependencyId) return ""
+    const pickerState = dependencyScriptCandidates[dependencyId]
+    const dependency = dependencyById(dependencyId)
+    const title = dependency ? (dependency.title || dependency.name || dependency.id) : dependencyId
+    const folderPath = dependency ? dependencyFolderPath(dependency) : dependencyId
+    const fullFolderPath = dependency ? dependencyFullPath(dependency) : dependencyId
+    const icon = (dependency && dependency.icon) || "/pinokio-black.png"
+    const selectedDependencyScript = dependencyScriptSelections[dependencyId] || (dependency && dependency.autolaunch ? dependency.autolaunch : "")
+    let body = ""
+    if (!pickerState || pickerState.loading) {
+      body = '<div class="app-autolaunch-empty">Loading script choices...</div>'
+    } else if (pickerState.error) {
+      body = `<div class="app-autolaunch-empty">${escapeHtml(pickerState.error)}</div>`
+    } else {
+      const candidates = [].concat(pickerState.menu || [], pickerState.other || [])
+      if (candidates.length === 0) {
+        body = '<div class="app-autolaunch-empty">No local scripts were found for this app.</div>'
+      } else {
+        body = `
+          <div class="app-autolaunch-script-list">
+            ${candidates.map((candidate) => {
+              const script = candidate && candidate.script ? candidate.script : ""
+              if (!script) return ""
+              const checked = script === selectedDependencyScript ? "checked" : ""
+              const selected = script === selectedDependencyScript ? " selected" : ""
+              return `
+                <label class="app-autolaunch-script-option${selected}">
+                  <input type="radio" name="app-autolaunch-dependency-script-${escapeHtml(dependencyId)}" data-app-autolaunch-dependency-script-choice data-app-autolaunch-dependency-script-app="${escapeHtml(dependencyId)}" value="${escapeHtml(script)}" ${checked}>
+                  <div>
+                    <div class="app-autolaunch-script-title"><span>${escapeHtml(candidate.label || script)}</span></div>
+                    <div class="app-autolaunch-script-path">${escapeHtml(script)}</div>
+                  </div>
+                </label>
+              `
+            }).join("")}
+          </div>
+        `
+      }
+    }
+    return `
+      <div class="app-autolaunch-dependency-script-modal" role="dialog" aria-modal="true" aria-label="Select launch script for ${escapeHtml(title)}">
+        <div class="app-autolaunch-dependency-script-panel">
+          <div class="app-autolaunch-dependency-script-head">
+            <div>
+              <div class="app-autolaunch-title">Select launch script</div>
+              <div class="app-autolaunch-note">This app must have a launch script before it can be required.</div>
+            </div>
+            <button type="button" class="app-autolaunch-close" data-app-autolaunch-close-dependency-script-modal aria-label="Close script selection">
+              <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="app-autolaunch-dependency-script-app" title="${escapeHtml(fullFolderPath)}">
+            <img src="${escapeHtml(icon)}" alt="" onerror="this.onerror=null; this.src='/pinokio-black.png'">
+            <div class="app-autolaunch-dependency-option-meta">
+              <div class="app-autolaunch-dependency-option-title">${escapeHtml(title)}</div>
+              <div class="app-autolaunch-dependency-option-path">${escapeHtml(folderPath)}</div>
+            </div>
+          </div>
+          <div class="app-autolaunch-dependency-script-body">
+            ${body}
+          </div>
+          <div class="app-autolaunch-dependency-script-actions">
+            <button type="button" class="app-autolaunch-primary" data-app-autolaunch-confirm-dependency-script data-app-autolaunch-dependency-script-app="${escapeHtml(dependencyId)}" ${selectedDependencyScript ? "" : "disabled"}>
+              <i class="fa-solid fa-plus" aria-hidden="true"></i>
+              <span class="app-autolaunch-primary-text">Add requirement</span>
+              ${selectedDependencyScript ? `<span class="app-autolaunch-primary-script">${escapeHtml(selectedDependencyScript)}</span>` : ""}
+            </button>
+          </div>
+        </div>
+      </div>
+    `
+  }
+  const configuredScript = (data) => data && data.current ? data.current : ""
+  const setFeedback = (message, isError = false) => {
+    feedbackEl.textContent = message || ""
+    feedbackEl.classList.toggle("error", !!isError)
+  }
+  const setBusy = (busy) => {
+    saving = !!busy
+    const blocked = saving || savingDependencies || savingDependencyScript || loadingCandidates
+    const setControlBusy = (control, disabled) => {
+      if (!control) return
+      const attr = "data-app-autolaunch-disabled-before-busy"
+      if (disabled) {
+        if (!control.hasAttribute(attr)) {
+          control.setAttribute(attr, control.disabled ? "true" : "false")
+        }
+        control.disabled = true
+        return
+      }
+      const previous = control.getAttribute(attr)
+      if (previous !== null) {
+        control.disabled = previous === "true"
+        control.removeAttribute(attr)
+      }
+    }
+    setControlBusy(switchButton, blocked)
+    button.toggleAttribute("aria-busy", saving || savingDependencies || savingDependencyScript)
+    scriptsEl.querySelectorAll("input").forEach((input) => {
+      setControlBusy(input, saving || savingDependencyScript)
+    })
+    scriptsEl.querySelectorAll("button").forEach((control) => {
+      setControlBusy(control, saving || savingDependencyScript)
+    })
+    dependenciesEl.querySelectorAll("button, input").forEach((control) => {
+      setControlBusy(control, saving || savingDependencies || savingDependencyScript)
+    })
+  }
+  const renderStatus = () => {
+    const enabled = !!(state && state.autolaunch_enabled)
+    status.textContent = enabled ? "ON" : "OFF"
+    button.dataset.enabled = enabled ? "true" : "false"
+    button.setAttribute("aria-label", `Autolaunch. Start with Pinokio ${enabled ? "On" : "Off"}`)
+    switchButton.setAttribute("aria-checked", enabled ? "true" : "false")
+    switchButton.title = `Start with Pinokio 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 {
+      dependencyPickerOpen = false
+      pendingDependencyId = ""
+      dependencyScriptPickerOpen = ""
+      renderDependencies()
+      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 (candidates.length === 0) {
+      scriptsEl.innerHTML = '<div class="app-autolaunch-empty">No local scripts were found for this app.</div>'
+      setBusy(false)
+      return
+    }
+    const dependencies = Array.isArray(state.autolaunch_depends) ? state.autolaunch_depends : []
+    const hasRequirements = dependencies.length > 0
+    const requirementWarning = hasRequirements && !current
+      ? '<div class="app-autolaunch-feedback error">Choose this app\'s launch script before these requirements can run.</div>'
+      : ""
+    const clear = current
+      ? `<button type="button" class="app-autolaunch-clear-script" data-app-autolaunch-clear-script title="${hasRequirements ? "Remove requirements before clearing this app's launch script." : "Clear launch script"}" ${hasRequirements ? "disabled" : ""}>
+          <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+          <span>Clear launch script</span>
+        </button>`
+      : ""
+    scriptsEl.innerHTML = requirementWarning + clear + 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 || ""
+      }
+      selectedScript = updated.autolaunch || ""
+    }
+    renderStatus()
+  }
+  const renderDependencies = () => {
+    if (loadingCandidates) {
+      dependenciesEl.innerHTML = '<div class="app-autolaunch-empty">Loading dependencies...</div>'
+      return
+    }
+    if (!candidateState) {
+      dependenciesEl.innerHTML = '<div class="app-autolaunch-empty">Open to load dependencies.</div>'
+      return
+    }
+    const dependencies = Array.isArray(state.autolaunch_depends) ? state.autolaunch_depends : []
+    const dependencySet = new Set(dependencies)
+    const displayDependencies = dependencies.slice()
+    const selectedRows = displayDependencies.length > 0
+      ? displayDependencies.map(renderSelectedDependency).join("")
+      : '<div class="app-autolaunch-dependency-row-empty">No dependencies.</div>'
+    const availableDependencies = dependencyOptions()
+      .filter((candidate) => candidate && candidate.id && !dependencySet.has(candidate.id))
+    const picker = availableDependencies.length > 0
+      ? `
+        <div class="app-autolaunch-dependency-picker" data-app-autolaunch-dependency-picker>
+          <button type="button" class="app-autolaunch-dependency-trigger" data-app-autolaunch-toggle-dependency-picker aria-expanded="${dependencyPickerOpen ? "true" : "false"}">
+            <i class="fa-solid fa-plus" aria-hidden="true"></i>
+            <span>Add dependency...</span>
+            <i class="fa-solid fa-chevron-${dependencyPickerOpen ? "up" : "down"}" aria-hidden="true"></i>
+          </button>
+          ${dependencyPickerOpen ? `
+            <div class="app-autolaunch-dependency-menu">
+              <label class="app-autolaunch-dependency-filter">
+                <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
+                <input type="search" placeholder="Search apps" data-app-autolaunch-dependency-search autocomplete="off">
+              </label>
+              <div class="app-autolaunch-dependency-options">
+                ${availableDependencies.map(renderDependencyOption).join("")}
+                <div class="app-autolaunch-dependency-picker-empty" data-app-autolaunch-dependency-empty hidden>No apps match that search.</div>
+              </div>
+            </div>
+          ` : ""}
+        </div>
+      `
+      : `
+        <button type="button" class="app-autolaunch-dependency-trigger" disabled>
+          <i class="fa-solid fa-check" aria-hidden="true"></i>
+          <span>No more apps to add</span>
+        </button>
+      `
+    dependenciesEl.innerHTML = `
+      <div class="app-autolaunch-dependency-stack">
+        <div class="app-autolaunch-dependency-selected">${selectedRows}</div>
+        ${picker}
+      </div>
+      ${renderDependencyScriptModal()}
+    `
+    setBusy(false)
+  }
+  const filterDependencyPicker = (picker) => {
+    if (!picker) return
+    const input = picker.querySelector("[data-app-autolaunch-dependency-search]")
+    const query = input ? input.value.trim().toLowerCase() : ""
+    let visibleCount = 0
+    picker.querySelectorAll("[data-app-autolaunch-add-dependency]").forEach((option) => {
+      const haystack = option.getAttribute("data-search-text") || ""
+      const visible = !query || haystack.includes(query)
+      option.hidden = !visible
+      if (visible) visibleCount += 1
+    })
+    const empty = picker.querySelector("[data-app-autolaunch-dependency-empty]")
+    if (empty) empty.hidden = visibleCount !== 0
+  }

package/server/views/partials/autolaunch_dependency_helpers.ejs

@@ -0,0 +1,204 @@
+const dependencyAppsFor = (app) => {
+  if (!app) return [];
+  return autolaunchApps
+    .filter((candidate) => candidate && candidate.id && candidate.id !== app.id)
+    .slice()
+    .sort(compareApps);
+};
+
+const dependencyById = (appId) => autolaunchApps.find((candidate) => candidate && candidate.id === appId) || null;
+
+const dependencyFolderPath = (app) => formatAppFolderPath(app);
+
+const dependencyFullPath = (app) => String((app && (app.workspace_path || app.launcher_path || app.id)) || "");
+
+const renderDependencyOption = (candidate) => {
+  const title = candidate.title || candidate.name || candidate.id;
+  const folderPath = dependencyFolderPath(candidate);
+  const fullFolderPath = dependencyFullPath(candidate);
+  const searchText = `${title} ${candidate.id || ""} ${folderPath} ${fullFolderPath}`.toLowerCase();
+  return `
+    <button type="button" class="autolaunch-dependency-option" data-add-dependency="${escapeHtml(candidate.id)}" data-search-text="${escapeHtml(searchText)}" title="${escapeHtml(fullFolderPath)}" ${savingDependencies ? "disabled" : ""}>
+      <img src="${escapeHtml(candidate.icon || "/pinokio-black.png")}" alt="" onerror="this.onerror=null; this.src='/pinokio-black.png'">
+      <span class="autolaunch-dependency-option-meta">
+        <span class="autolaunch-dependency-option-title">${escapeHtml(title)}</span>
+        <span class="autolaunch-dependency-option-path">${escapeHtml(folderPath)}</span>
+      </span>
+    </button>
+  `;
+};
+
+const renderSelectedDependency = (appId) => {
+  const candidate = dependencyById(appId);
+  const title = candidate ? (candidate.title || candidate.name || candidate.id) : appId;
+  const folderPath = candidate ? dependencyFolderPath(candidate) : appId;
+  const fullFolderPath = candidate ? dependencyFullPath(candidate) : appId;
+  const script = candidate && candidate.autolaunch ? candidate.autolaunch : "";
+  const scriptLine = script
+    ? `<span class="autolaunch-dependency-option-path">${escapeHtml(script)}</span>`
+    : `<button type="button" class="autolaunch-dependency-configure" data-configure-dependency="${escapeHtml(appId)}" ${savingDependencies ? "disabled" : ""}>
+        <i class="fa-solid fa-gear" aria-hidden="true"></i>
+        Missing launch script
+      </button>`;
+  return `
+    <div class="autolaunch-dependency-row" title="${escapeHtml(fullFolderPath)}">
+      <img src="${escapeHtml((candidate && candidate.icon) || "/pinokio-black.png")}" alt="" onerror="this.onerror=null; this.src='/pinokio-black.png'">
+      <span class="autolaunch-dependency-option-meta">
+        <span class="autolaunch-dependency-option-title">${escapeHtml(title)}</span>
+        <span class="autolaunch-dependency-option-path">${escapeHtml(folderPath)}</span>
+        ${scriptLine}
+      </span>
+      <button type="button" class="autolaunch-dependency-remove" data-remove-dependency="${escapeHtml(appId)}" aria-label="Remove ${escapeHtml(title)}" ${savingDependencies ? "disabled" : ""}>
+        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+      </button>
+    </div>
+  `;
+};
+
+const renderDependencyScriptModal = () => {
+  const appId = dependencyScriptPickerOpen;
+  if (!appId) {
+    return "";
+  }
+  const state = dependencyScriptCandidates[appId];
+  const dependency = dependencyById(appId);
+  const title = dependency ? (dependency.title || dependency.name || dependency.id) : appId;
+  const folderPath = dependency ? dependencyFolderPath(dependency) : appId;
+  const fullFolderPath = dependency ? dependencyFullPath(dependency) : appId;
+  const appIcon = (dependency && dependency.icon) || "/pinokio-black.png";
+  const selectedDependencyScript = dependencyScriptSelections[appId] || (dependency && dependency.autolaunch ? dependency.autolaunch : "");
+  let body = "";
+  if (!state || state.loading) {
+    body = '<div class="autolaunch-loading"><i class="fa-solid fa-circle-notch fa-spin"></i> Loading script choices...</div>';
+  } else if (state.error) {
+    body = `<div class="autolaunch-empty">${escapeHtml(state.error)}</div>`;
+  } else {
+    const candidates = [].concat(state.menu || [], state.other || []);
+    if (candidates.length === 0) {
+      body = '<div class="autolaunch-empty">No local scripts were found for this app.</div>';
+    } else {
+      body = `
+        <div class="autolaunch-script-list">
+          ${candidates.map((candidate) => {
+            const checked = candidate.script === selectedDependencyScript ? "checked" : "";
+            const selected = candidate.script === selectedDependencyScript ? " selected" : "";
+            const icon = candidate.icon || "fa-regular fa-file-code";
+            return `
+              <label class="autolaunch-script-option${selected}">
+                <input type="radio" name="dependency-script-${escapeHtml(appId)}" data-dependency-script-choice data-dependency-script-app="${escapeHtml(appId)}" value="${escapeHtml(candidate.script)}" ${checked} ${savingDependencyScript ? "disabled" : ""}>
+                <i class="${escapeHtml(icon)}"></i>
+                <div>
+                  <div class="autolaunch-script-title"><span>${escapeHtml(candidate.label || candidate.script)}</span></div>
+                  <div class="autolaunch-script-path">${escapeHtml(candidate.script)}</div>
+                </div>
+              </label>
+            `;
+          }).join("")}
+        </div>
+      `;
+    }
+  }
+  return `
+    <div class="autolaunch-dependency-script-modal" role="dialog" aria-modal="true" aria-label="Select launch script for ${escapeHtml(title)}">
+      <div class="autolaunch-dependency-script-panel">
+        <div class="autolaunch-dependency-script-head">
+          <div>
+            <h3 class="autolaunch-section-title">Select launch script</h3>
+            <div class="autolaunch-section-note">This app must have a launch script before it can be required.</div>
+          </div>
+          <button type="button" class="autolaunch-icon-button" data-close-dependency-script-modal aria-label="Close script selection" ${savingDependencyScript ? "disabled" : ""}>
+            <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+          </button>
+        </div>
+        <div class="autolaunch-dependency-script-app" title="${escapeHtml(fullFolderPath)}">
+          <img src="${escapeHtml(appIcon)}" alt="" onerror="this.onerror=null; this.src='/pinokio-black.png'">
+          <span class="autolaunch-dependency-option-meta">
+            <span class="autolaunch-dependency-option-title">${escapeHtml(title)}</span>
+            <span class="autolaunch-dependency-option-path">${escapeHtml(folderPath)}</span>
+          </span>
+        </div>
+        <div class="autolaunch-dependency-script-body">
+          ${body}
+        </div>
+        <div class="autolaunch-dependency-script-actions">
+          <button type="button" class="autolaunch-primary" data-confirm-dependency-script data-dependency-script-app="${escapeHtml(appId)}" ${selectedDependencyScript ? "" : "disabled"}>
+            <i class="fa-solid fa-plus" aria-hidden="true"></i>
+            <span class="autolaunch-primary-text">Add requirement</span>
+            ${selectedDependencyScript ? `<span class="autolaunch-primary-script">${escapeHtml(selectedDependencyScript)}</span>` : ""}
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+};
+
+const renderDependencySection = (app) => {
+  if (!app) {
+    return "";
+  }
+  const dependencies = Array.isArray(app.autolaunch_depends) ? app.autolaunch_depends : [];
+  const dependencySet = new Set(dependencies);
+  const displayDependencies = dependencies.slice();
+  const dependencyApps = dependencyAppsFor(app);
+  const selectedRows = displayDependencies.length > 0
+    ? displayDependencies.map(renderSelectedDependency).join("")
+    : '<div class="autolaunch-dependency-row-empty">No dependencies.</div>';
+  const availableDependencies = dependencyApps.filter((candidate) => !dependencySet.has(candidate.id));
+  const picker = availableDependencies.length > 0
+    ? `
+      <div class="autolaunch-dependency-picker" data-dependency-picker>
+        <button type="button" class="autolaunch-dependency-trigger" data-toggle-dependency-picker aria-expanded="${dependencyPickerOpen ? "true" : "false"}" ${savingDependencies ? "disabled" : ""}>
+          <i class="fa-solid fa-plus" aria-hidden="true"></i>
+          <span>Add dependency...</span>
+          <i class="fa-solid fa-chevron-${dependencyPickerOpen ? "up" : "down"}" aria-hidden="true"></i>
+        </button>
+        ${dependencyPickerOpen ? `
+          <div class="autolaunch-dependency-menu">
+            <label class="autolaunch-dependency-filter">
+              <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
+              <input type="search" placeholder="Search apps" data-dependency-search autocomplete="off" ${savingDependencies ? "disabled" : ""}>
+            </label>
+            <div class="autolaunch-dependency-options">
+              ${availableDependencies.map(renderDependencyOption).join("")}
+              <div class="autolaunch-dependency-picker-empty" data-dependency-empty hidden>No apps match that search.</div>
+            </div>
+          </div>
+        ` : ""}
+      </div>
+    `
+    : `
+      <button type="button" class="autolaunch-dependency-trigger" disabled>
+        <i class="fa-solid fa-check" aria-hidden="true"></i>
+        <span>No more apps to add</span>
+      </button>
+    `;
+  return `
+    <div class="autolaunch-section">
+      <div class="autolaunch-section-header">
+        <h3 class="autolaunch-section-title">Requires</h3>
+      </div>
+      <div class="autolaunch-dependency-list">
+        <div class="autolaunch-dependency-stack">
+          <div class="autolaunch-dependency-selected">${selectedRows}</div>
+          ${picker}
+        </div>
+      </div>
+    </div>
+    ${renderDependencyScriptModal()}
+  `;
+};
+
+const filterDependencyPicker = (picker) => {
+  if (!picker) return;
+  const input = picker.querySelector("[data-dependency-search]");
+  const query = input ? input.value.trim().toLowerCase() : "";
+  let visibleCount = 0;
+  picker.querySelectorAll("[data-add-dependency]").forEach((option) => {
+    const haystack = option.getAttribute("data-search-text") || "";
+    const visible = !query || haystack.includes(query);
+    option.hidden = !visible;
+    if (visible) visibleCount += 1;
+  });
+  const empty = picker.querySelector("[data-dependency-empty]");
+  if (empty) empty.hidden = visibleCount !== 0;
+};

package/server/views/partials/autolaunch_dependency_save.ejs

@@ -0,0 +1,13 @@
+<%- include('launch_settings_dependency_save_factory') %>
+const saveDependencies = createLaunchSettingsDependencySaver({
+  getAppId: () => {
+    const app = currentApp();
+    return app ? app.id : "";
+  },
+  isSaving: () => savingDependencies,
+  setSaving: (value) => { savingDependencies = value; },
+  setBusy: setDetailBusy,
+  setFeedback,
+  onSaved: syncAppState,
+  render: renderCandidates
+});