pinokiod 7.3.14 → 7.4.0

package/server/views/partials/autolaunch_dependency_styles.ejs

@@ -0,0 +1,347 @@
+body.autolaunch-page .autolaunch-dependency-list {
+  display: grid;
+  gap: 8px;
+}
+body.autolaunch-page .autolaunch-dependency-stack {
+  border: 1px solid var(--task-border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--task-panel) 98%, var(--task-soft));
+  overflow: hidden;
+}
+body.autolaunch-page .autolaunch-dependency-selected {
+  display: grid;
+}
+body.autolaunch-page .autolaunch-dependency-row {
+  border-bottom: 1px solid var(--task-border);
+  color: var(--task-text);
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 9px;
+  min-height: 48px;
+  padding: 8px 10px;
+}
+body.autolaunch-page .autolaunch-dependency-row:last-child {
+  border-bottom: 0;
+}
+body.autolaunch-page .autolaunch-dependency-row img {
+  width: 30px;
+  height: 30px;
+  border-radius: 7px;
+  object-fit: cover;
+}
+body.autolaunch-page .autolaunch-dependency-row-empty {
+  min-height: 42px;
+  display: flex;
+  align-items: center;
+  color: var(--task-muted);
+  font-size: 12px;
+  padding: 0 10px;
+}
+body.autolaunch-page .autolaunch-dependency-remove {
+  width: 26px;
+  height: 26px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--task-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  cursor: pointer;
+}
+body.autolaunch-page .autolaunch-dependency-remove:hover {
+  background: color-mix(in srgb, var(--task-border) 70%, transparent);
+  color: var(--task-text);
+}
+body.autolaunch-page .autolaunch-dependency-picker {
+  display: grid;
+  gap: 0;
+}
+body.autolaunch-page .autolaunch-dependency-trigger {
+  width: 100%;
+  min-height: 40px;
+  border: 0;
+  border-top: 1px solid var(--task-border);
+  border-radius: 0;
+  background: transparent;
+  color: var(--task-text);
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-align: left;
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+}
+body.autolaunch-page .autolaunch-dependency-trigger:hover {
+  background: color-mix(in srgb, var(--task-soft) 70%, var(--task-panel));
+}
+body.autolaunch-page .autolaunch-dependency-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+body.autolaunch-page .autolaunch-dependency-trigger span {
+  flex: 1;
+  min-width: 0;
+}
+body.autolaunch-page .autolaunch-dependency-menu {
+  border-top: 1px solid var(--task-border);
+  background: transparent;
+  overflow: hidden;
+}
+body.autolaunch-page .autolaunch-dependency-filter {
+  min-height: 34px;
+  border-bottom: 1px solid var(--task-border);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 10px;
+  color: var(--task-muted);
+}
+body.autolaunch-page .autolaunch-dependency-filter input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--task-text);
+  font: inherit;
+  font-size: 12px;
+}
+body.autolaunch-page .autolaunch-dependency-options {
+  max-height: 320px;
+  overflow: auto;
+}
+body.autolaunch-page .autolaunch-dependency-option {
+  width: 100%;
+  border: 0;
+  border-bottom: 1px solid var(--task-border);
+  border-radius: 0;
+  background: transparent;
+  color: var(--task-text);
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  gap: 9px;
+  align-items: center;
+  padding: 8px 10px;
+  text-align: left;
+  cursor: pointer;
+}
+body.autolaunch-page .autolaunch-dependency-option:last-child {
+  border-bottom: 0;
+}
+body.autolaunch-page .autolaunch-dependency-option:hover,
+body.autolaunch-page .autolaunch-dependency-option:focus-visible {
+  background: color-mix(in srgb, var(--task-accent) 8%, transparent);
+  outline: none;
+}
+body.autolaunch-page .autolaunch-dependency-option[hidden] {
+  display: none;
+}
+body.autolaunch-page .autolaunch-dependency-option img {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+body.autolaunch-page .autolaunch-dependency-option-meta {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+body.autolaunch-page .autolaunch-dependency-option-title {
+  font-size: 12px;
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+body.autolaunch-page .autolaunch-dependency-option-path {
+  color: var(--task-muted);
+  direction: rtl;
+  font-size: 11px;
+  line-height: 1.25;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  unicode-bidi: plaintext;
+  white-space: nowrap;
+}
+body.autolaunch-page .autolaunch-dependency-picker-empty {
+  color: var(--task-muted);
+  font-size: 11px;
+  padding: 10px;
+}
+body.autolaunch-page .autolaunch-dependency-configure {
+  width: fit-content;
+  border: 1px solid color-mix(in srgb, #b45309 24%, var(--task-border));
+  border-radius: 6px;
+  background: color-mix(in srgb, #b45309 8%, var(--task-panel));
+  color: var(--task-text);
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 24px;
+  padding: 0 7px;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+}
+body.autolaunch-page .autolaunch-dependency-configure:disabled {
+  cursor: wait;
+  opacity: 0.6;
+}
+body.autolaunch-page .autolaunch-icon-button {
+  width: 34px;
+  height: 34px;
+  border: 1px solid var(--task-border-strong);
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--task-panel) 94%, white);
+  color: var(--task-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+body.dark.autolaunch-page .autolaunch-icon-button {
+  background: color-mix(in srgb, var(--task-panel) 92%, black);
+}
+body.autolaunch-page .autolaunch-icon-button:hover {
+  color: var(--task-text);
+  border-color: var(--task-border-strong);
+}
+body.autolaunch-page .autolaunch-icon-button:disabled {
+  cursor: wait;
+  opacity: 0.6;
+}
+body.autolaunch-page .autolaunch-dependency-script-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 10000003;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(2, 6, 23, 0.55);
+  box-sizing: border-box;
+}
+body.autolaunch-page .autolaunch-dependency-script-panel {
+  width: min(520px, calc(100vw - 32px));
+  max-height: min(620px, calc(100vh - 48px));
+  overflow: auto;
+  border: 1px solid var(--task-border-strong);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--task-panel) 98%, white);
+  color: var(--task-text);
+  box-shadow: 0 24px 72px rgba(2, 6, 23, 0.42);
+  box-sizing: border-box;
+}
+body.dark.autolaunch-page .autolaunch-dependency-script-panel {
+  background: color-mix(in srgb, var(--task-panel) 96%, black);
+  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.64);
+}
+body.autolaunch-page .autolaunch-dependency-script-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px;
+  border-bottom: 1px solid var(--task-border);
+}
+body.autolaunch-page .autolaunch-dependency-script-app {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--task-border);
+}
+body.autolaunch-page .autolaunch-dependency-script-app img {
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+body.autolaunch-page .autolaunch-dependency-script-body {
+  padding: 14px 16px 16px;
+}
+body.autolaunch-page .autolaunch-dependency-script-actions {
+  position: sticky;
+  bottom: 0;
+  padding: 12px 16px;
+  border-top: 1px solid var(--task-border);
+  background: color-mix(in srgb, var(--task-panel) 98%, white);
+}
+body.dark.autolaunch-page .autolaunch-dependency-script-actions {
+  background: color-mix(in srgb, var(--task-panel) 96%, black);
+}
+body.autolaunch-page .autolaunch-primary {
+  appearance: none;
+  width: 100%;
+  min-height: 38px;
+  border: 1px solid color-mix(in srgb, var(--task-accent) 72%, var(--task-border));
+  border-radius: 7px;
+  background: var(--task-accent);
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 12px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1;
+  cursor: pointer;
+  white-space: nowrap;
+}
+body.autolaunch-page .autolaunch-primary:hover {
+  filter: brightness(0.95);
+}
+body.autolaunch-page .autolaunch-primary:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--task-accent) 36%, transparent);
+  outline-offset: 2px;
+}
+body.autolaunch-page .autolaunch-primary:disabled {
+  border-color: var(--task-border);
+  background: color-mix(in srgb, var(--task-soft) 80%, var(--task-panel));
+  color: var(--task-muted);
+  cursor: not-allowed;
+  filter: none;
+}
+body.autolaunch-page .autolaunch-primary-script {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 3px 6px;
+  border-radius: 5px;
+  background: rgba(255, 255, 255, 0.2);
+  font-weight: 800;
+}
+body.autolaunch-page .autolaunch-primary:disabled .autolaunch-primary-script {
+  background: transparent;
+}
+body.autolaunch-page .autolaunch-manual {
+  padding: 16px;
+  border-top: 1px solid var(--task-border);
+}
+body.autolaunch-page .autolaunch-manual-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+body.autolaunch-page .autolaunch-manual input {
+  flex: 1 1 auto;
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--task-border-strong);
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--task-panel) 98%, white);
+}
+body.dark.autolaunch-page .autolaunch-manual input {
+  background: color-mix(in srgb, var(--task-panel) 95%, black);
+}

package/server/views/partials/home_action_modal.ejs

@@ -11,7 +11,10 @@
       <div class='home-actions-heading'>
         <div class='home-actions-title-row'>
           <h2 id='<%= id %>-title'><%= item.name %></h2>
-          <% if (item.running) { %>
+          <% if (item.autolaunch_starting) { %>
+            <% const homeActionsAutolaunchLabel = item.autolaunch_status_label || (item.autolaunch_blocked ? "Blocked" : item.autolaunch_waiting ? "Waiting" : "Starting") %>
+            <span class='home-actions-status home-actions-status--starting' title='<%= homeActionsAutolaunchLabel %>'><%= homeActionsAutolaunchLabel %></span>
+          <% } else if (item.running) { %>
             <span class='home-actions-status'>Running</span>
           <% } %>
         </div>

package/server/views/partials/launch_requirements_status_client.ejs

@@ -0,0 +1,271 @@
+;(function() {
+  const root = document.querySelector("[data-launch-requirements-status]")
+  const appId = <%- JSON.stringify((typeof name !== "undefined" && name) ? name : "") %>
+  const appTitle = <%- JSON.stringify((typeof config !== "undefined" && config && config.title) || (typeof name !== "undefined" && name) || "app") %>
+  const initialEnabled = <%- JSON.stringify(!!(typeof launch_requirements_status_enabled !== "undefined" && launch_requirements_status_enabled)) %>
+  if (!root || !appId) return
+  const shouldDeferToParentLaunchRequirements = () => {
+    try {
+      if (window.self === window.top) return false
+      const parentDocument = window.parent && window.parent.document
+      return !!(parentDocument && parentDocument.querySelector("[data-launch-requirements-status]"))
+    } catch (_) {
+      return false
+    }
+  }
+  if (shouldDeferToParentLaunchRequirements()) return
+  let cancelling = false
+  const escapeHtml = (value) => {
+    if (value === null || value === undefined) return ""
+    return String(value).replace(/[&<>"']/g, (match) => {
+      switch (match) {
+        case "&": return "&amp;"
+        case "<": return "&lt;"
+        case ">": return "&gt;"
+        case "\"": return "&quot;"
+        case "'": return "&#39;"
+        default: return match
+      }
+    })
+  }
+  const stepLabel = (row) => {
+    const current = Number(row && row.step_current)
+    const total = Number(row && row.step_total)
+    return Number.isInteger(current) && Number.isInteger(total) && total > 1 ? ` (${current}/${total})` : ""
+  }
+  const titleForId = (id, titleById) => {
+    if (!id) return ""
+    return titleById[id] || id
+  }
+  const waitingForLabel = (row, titleById) => {
+    const waitingFor = row && Array.isArray(row.waiting_for) ? row.waiting_for : []
+    const names = waitingFor
+      .map((id) => titleForId(id, titleById))
+      .filter(Boolean)
+    return names.length > 0 ? `Waiting for ${names.join(", ")}` : "Waiting"
+  }
+  const stateLabel = (row, titleById) => {
+    const script = row && row.script ? row.script : "script"
+    if (row && row.state === "ready") return "Ready"
+    if (row && row.state === "blocked") return row.blocked_reason || "Needs setup"
+    if (row && row.state === "waiting") return waitingForLabel(row, titleById)
+    if (row && row.state === "pending") return "Pending"
+    return `Starting ${script}${stepLabel(row)}`
+  }
+  const isActiveRow = (row) => {
+    if (!row) return false
+    return row.state === "starting"
+  }
+  const isReadyRow = (row) => {
+    if (!row) return false
+    return row.state === "ready"
+  }
+  const stateClass = (row) => {
+    if (isActiveRow(row)) return " is-active"
+    if (isReadyRow(row)) return " is-ready"
+    return ""
+  }
+  const stateIcon = (row) => {
+    if (isActiveRow(row)) {
+      return '<i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true"></i>'
+    }
+    if (isReadyRow(row)) {
+      return '<i class="fa-solid fa-check" aria-hidden="true"></i>'
+    }
+    return ""
+  }
+  const render = (status) => {
+    if (!status) {
+      root.hidden = true
+      root.innerHTML = ""
+      return
+    }
+    const rawRequirements = Array.isArray(status.requirements) ? status.requirements : []
+    const requirements = rawRequirements
+    if (requirements.length === 0 && status.state !== "blocked") {
+      root.hidden = true
+      root.innerHTML = ""
+      return
+    }
+    const waiting = requirements.filter((row) => row && row.state !== "ready")
+    if (waiting.length === 0 && status.state !== "blocked") {
+      root.hidden = true
+      root.innerHTML = ""
+      return
+    }
+    const title = status.state === "blocked" ? "Launch needs setup" : "Preparing required apps"
+    const detail = status.state === "blocked" && status.blocked_reason
+      ? status.blocked_reason
+      : waiting.length > 0
+      ? `Waiting for ${waiting.map((row) => row.title || row.id).join(", ")}.`
+      : (status.blocked_reason || `${status.title || appTitle} will start after its requirements are ready.`)
+    const titleById = requirements.reduce((acc, row) => {
+      if (row && row.id) {
+        acc[row.id] = row.title || row.id
+      }
+      return acc
+    }, {})
+    const canCancel = true
+    root.innerHTML = `
+      <div class="launch-requirements-card">
+        <div class="launch-requirements-title">
+          <span>${escapeHtml(title)}</span>
+        </div>
+        <div class="launch-requirements-detail">${escapeHtml(detail)}</div>
+        ${requirements.length > 0 ? `
+          <div class="launch-requirements-list">
+          ${requirements.map((row) => `
+            <div class="launch-requirements-row">
+              <img src="${escapeHtml(row.icon || "/pinokio-black.png")}" alt="" onerror="this.onerror=null; this.src='/pinokio-black.png'">
+              <div class="launch-requirements-name">${escapeHtml(row.title || row.id)}</div>
+              <div class="launch-requirements-state${stateClass(row)}">
+                ${stateIcon(row)}
+                <span>${escapeHtml(stateLabel(row, titleById))}</span>
+                ${row && row.state === "blocked" ? `
+                  <button type="button" class="launch-requirements-choose-script" data-launch-requirements-choose-script="${escapeHtml(row.id || "")}">
+                    <i class="fa-solid fa-file-code" aria-hidden="true"></i>
+                    <span>Choose script</span>
+                  </button>
+                ` : ""}
+              </div>
+            </div>
+          `).join("")}
+          </div>
+        ` : ""}
+        ${canCancel ? `
+          <div class="launch-requirements-actions">
+            <button type="button" class="launch-requirements-stop" data-launch-requirements-stop ${cancelling ? "disabled" : ""}>
+              <i class="fa-solid ${cancelling ? "fa-circle-notch fa-spin" : "fa-stop"}" aria-hidden="true"></i>
+              <span>${cancelling ? "Stopping launch..." : "Stop launch"}</span>
+            </button>
+          </div>
+        ` : ""}
+      </div>
+    `
+    root.hidden = false
+  }
+  const notifyLaunchRequirementsControl = (detail = {}) => {
+    const payload = {
+      type: "pinokio:launch-requirements-control",
+      detail
+    }
+    try {
+      window.dispatchEvent(new CustomEvent(payload.type, { detail }))
+    } catch (_) {}
+    try {
+      for (let i = 0; i < window.frames.length; i++) {
+        window.frames[i].postMessage(payload, "*")
+      }
+    } catch (_) {}
+  }
+  const cancelLaunch = async () => {
+    if (cancelling) return
+    cancelling = true
+    const button = root.querySelector("[data-launch-requirements-stop]")
+    if (button) {
+      button.disabled = true
+      button.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true"></i><span>Stopping launch...</span>'
+    }
+    try {
+      const response = await fetch(`/pinokio/launch-requirements/${encodeURIComponent(appId)}/cancel`, {
+        method: "POST",
+        headers: { "Accept": "application/json" },
+        cache: "no-store"
+      })
+      const data = await response.json()
+      if (!response.ok || !data || !data.ok) {
+        throw new Error(data && data.error ? data.error : "Failed to stop launch.")
+      }
+      notifyLaunchRequirementsControl({
+        action: "cancelled",
+        app_id: appId
+      })
+      cancelling = false
+      render(null)
+      try {
+        if (typeof refresh === "function") {
+          refresh(true, { nodelay: true })
+        }
+      } catch (_) {}
+    } catch (_) {
+      cancelling = false
+      fetchInitialStatus()
+    }
+  }
+  root.addEventListener("click", (event) => {
+    const chooseScript = event.target && event.target.closest("[data-launch-requirements-choose-script]")
+    if (chooseScript) {
+      event.preventDefault()
+      const dependencyApp = chooseScript.getAttribute("data-launch-requirements-choose-script") || ""
+      if (!dependencyApp) return
+      const chooseEvent = new CustomEvent("pinokio:launch-requirements-choose-script", {
+        cancelable: true,
+        detail: {
+          app: dependencyApp
+        }
+      })
+      window.dispatchEvent(chooseEvent)
+      if (!chooseEvent.defaultPrevented) {
+        window.location.href = `/v/${encodeURIComponent(dependencyApp)}?autolaunch=1`
+      }
+      return
+    }
+    const stop = event.target && event.target.closest("[data-launch-requirements-stop]")
+    if (!stop) return
+    event.preventDefault()
+    cancelLaunch()
+  })
+  const renderStatusPayload = (data) => {
+    const status = data && data.ok ? data.status : null
+    if (status) {
+      cancelling = false
+      render(status)
+      return
+    }
+    render(null)
+  }
+  const fetchInitialStatus = async () => {
+    try {
+      const response = await fetch(`/pinokio/launch-requirements/${encodeURIComponent(appId)}`, {
+        headers: { "Accept": "application/json" },
+        cache: "no-store"
+      })
+      const data = await response.json()
+      renderStatusPayload(response.ok && data ? data : null)
+    } catch (_) {
+      renderStatusPayload(null)
+    }
+  }
+  const startStatusClient = () => {
+    if (root.dataset.launchRequirementsClient === "started") return
+    root.dataset.launchRequirementsClient = "started"
+    fetchInitialStatus()
+    const channel = `kernel.launch_requirements:${appId}`
+    let socket = null
+    try {
+      socket = new Socket()
+      socket.run({
+        method: channel,
+        mode: "listen"
+      }, (packet) => {
+        if (!packet || packet.type !== "launch.requirements") {
+          return
+        }
+        renderStatusPayload({
+          ok: true,
+          status: packet.data ? packet.data.status : null
+        })
+      }).catch(() => {})
+      window.addEventListener("beforeunload", () => {
+        if (socket && typeof socket.close === "function") {
+          socket.close()
+        }
+      }, { once: true })
+    } catch (_) {}
+  }
+  if (initialEnabled) {
+    startStatusClient()
+  } else {
+    window.addEventListener("pinokio:launch-requirements-configured", startStatusClient, { once: true })
+  }
+})()