pinokiod 7.2.12 → 7.2.13

package/server/lib/content_validation.js

@@ -1,6 +1,7 @@
 const fs = require("fs")
 const path = require("path")
 const clearModule = require("clear-module")
+const PluginSources = require("../../kernel/plugin_sources")
 
 const {
   TASK_CONFIG_FILENAME,
@@ -117,23 +118,7 @@ function createContentValidationService({ kernel }) {
   }
 
   const normalizePluginPath = (value) => {
-    let normalized = typeof value === "string" ? value.trim() : ""
-    if (!normalized) {
-      return ""
-    }
-    normalized = normalized.replace(/\\/g, "/")
-    normalized = normalized.replace(/^\/run(?=\/)/, "")
-    if (!normalized.startsWith("/")) {
-      normalized = `/${normalized}`
-    }
-    normalized = normalized.replace(/\/{2,}/g, "/").replace(/\/+$/, "")
-    if (!normalized) {
-      return ""
-    }
-    if (!normalized.endsWith("/pinokio.js")) {
-      normalized = `${normalized}/pinokio.js`
-    }
-    return normalized
+    return PluginSources.normalizePluginPath(value)
   }
 
   const normalizeBundledPluginSpec = (value) => {
@@ -169,9 +154,9 @@ function createContentValidationService({ kernel }) {
     }
 
     if (config && typeof config.icon === "string" && config.icon.trim()) {
-      if (normalizedPath.startsWith("/plugin/")) {
-        const relativeDir = path.posix.dirname(normalizedPath.slice(1))
-        context.image = `/asset/${relativeDir}/${config.icon.trim()}`
+      const pluginImage = PluginSources.pluginAssetHrefForIcon(normalizedPath, config.icon)
+      if (pluginImage) {
+        context.image = pluginImage
       } else if (normalizedPath.startsWith("/api/")) {
         const segments = normalizedPath.replace(/^\/+/, "").split("/")
         const appName = segments[1] || ""
@@ -192,7 +177,10 @@ function createContentValidationService({ kernel }) {
     const fallbackTitle = normalizedPath
       ? path.basename(path.posix.dirname(normalizedPath))
       : "Plugin"
-    if (!normalizedPath || (!normalizedPath.startsWith("/plugin/") && !normalizedPath.startsWith("/api/"))) {
+    const isSystemPlugin = PluginSources.isSystemPluginPath(normalizedPath)
+    const isHomePlugin = normalizedPath.startsWith("/plugin/")
+    const isApiPlugin = normalizedPath.startsWith("/api/")
+    if (!normalizedPath || (!isSystemPlugin && !isHomePlugin && !isApiPlugin)) {
       return buildInvalid({
         type: "plugin",
         subjectTitle: fallbackTitle,
@@ -205,8 +193,21 @@ function createContentValidationService({ kernel }) {
         detailUrl: "/plugins",
       })
     }
+    if (PluginSources.isLegacyPluginCodePath(normalizedPath)) {
+      return buildInvalid({
+        type: "plugin",
+        subjectTitle: fallbackTitle,
+        errors: [
+          buildError(
+            "This managed plugin path is no longer used.",
+            "Open the built-in Pinokio plugin instead."
+          ),
+        ],
+        detailUrl: "/plugins",
+      })
+    }
 
-    const absolutePath = kernel.path(normalizedPath.replace(/^\/+/, ""))
+    const absolutePath = PluginSources.pluginPathToAbsolute(kernel, normalizedPath)
     const folderPath = path.dirname(absolutePath)
     const loaded = await loadJsFile(absolutePath)
     if (!loaded.exists) {
@@ -267,9 +268,8 @@ function createContentValidationService({ kernel }) {
         ))
       }
       if (normalizedPath.startsWith("/plugin/")) {
-        const isManagedDefaultPlugin = normalizedPath.startsWith("/plugin/code/")
         const declaredPath = typeof config.path === "string" ? config.path.trim() : ""
-        if (!isManagedDefaultPlugin && declaredPath !== "plugin") {
+        if (declaredPath !== "plugin") {
           errors.push(buildError(
             'Standalone plugins must set `path: "plugin"`.',
             'Add `path: "plugin"` to pinokio.js.',
@@ -567,7 +567,7 @@ function createContentValidationService({ kernel }) {
     })
   }
 
-  const validateRunPath = async (pathComponents) => {
+  const validateRunPath = async (pathComponents, options = {}) => {
     if (!Array.isArray(pathComponents) || pathComponents.length === 0) {
       return buildValid()
     }
@@ -576,6 +576,9 @@ function createContentValidationService({ kernel }) {
       return buildValid()
     }
     if (normalized[0] === "plugin") {
+      if (options && options.system) {
+        return validatePluginByPath(`${PluginSources.SYSTEM_RUN_PREFIX}/${normalized.join("/")}`)
+      }
       return validatePluginByPath(`/${normalized.join("/")}`)
     }
     if (normalized[0] === "api" && normalized.length > 1) {

package/server/public/common.js

@@ -16,6 +16,7 @@ const requirementsGuardedRoutePrefixes = [
   '/api/',
   '/_api/',
   '/run/',
+  '/pinokio/run/',
   '/tools',
   '/bundle/',
   '/connect/',
@@ -104,6 +105,96 @@ function createMinimalLoadingSwal () {
   });
   return close;
 }
+
+const PINOKIO_WAIT_FOOTER_ID = 'pinokio-process-wait-footer-status'
+const PINOKIO_INSTALL_SPINNER_VARIANTS = ["grid-shift", "single-vacancy", "pulse-swap", "corner-chase", "flip-2x2", "stack-ripple", "pixel-orbit", "binary-shuffle"]
+const PINOKIO_INSTALL_STATUS_SPINNER_HTML = `
+<span class="install-status-spinner" aria-hidden="true">
+  <span class="install-status-grid-anchor install-status-grid-anchor-1"></span>
+  <span class="install-status-grid-anchor install-status-grid-anchor-2"></span>
+  <span class="install-status-grid-anchor install-status-grid-anchor-3"></span>
+  <span class="install-status-grid-anchor install-status-grid-anchor-4"></span>
+  <span class="install-status-grid-tile install-status-grid-tile-1"></span>
+  <span class="install-status-grid-tile install-status-grid-tile-2"></span>
+  <span class="install-status-grid-tile install-status-grid-tile-3"></span>
+  <span class="install-status-grid-tile install-status-grid-tile-4"></span>
+  <span class="install-status-grid-chaser"></span>
+  <span class="install-status-grid-pixel"></span>
+</span>`
+let lastPinokioWaitSpinnerVariant = null
+
+function escapePinokioStatusHtml(value) {
+  return String(value == null ? '' : value)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+function ensurePinokioWaitFooterStatus() {
+  let status = document.getElementById(PINOKIO_WAIT_FOOTER_ID)
+  if (status) {
+    return status
+  }
+  status = document.createElement('div')
+  status.id = PINOKIO_WAIT_FOOTER_ID
+  status.className = 'pinokio-install-inline-status pinokio-process-wait-footer-status'
+  status.hidden = true
+  status.setAttribute('aria-live', 'polite')
+
+  const anchor = document.querySelector('.terminal-container')
+    || document.querySelector('main')
+    || document.querySelector('#terminal')?.parentElement
+    || document.querySelector('footer')
+    || document.body
+
+  if (anchor && anchor !== document.body) {
+    anchor.insertAdjacentElement('afterend', status)
+  } else {
+    document.body.appendChild(status)
+  }
+  return status
+}
+
+function showPinokioWaitFooterStatus(data = {}) {
+  const title = data.title || 'Waiting'
+  const description = data.description || data.message || ''
+  const status = ensurePinokioWaitFooterStatus()
+  const candidates = PINOKIO_INSTALL_SPINNER_VARIANTS.filter((variant) => variant !== lastPinokioWaitSpinnerVariant)
+  const pool = candidates.length > 0 ? candidates : PINOKIO_INSTALL_SPINNER_VARIANTS
+  lastPinokioWaitSpinnerVariant = pool[Math.floor(Math.random() * pool.length)]
+  document.documentElement.dataset.installSpinnerVariant = lastPinokioWaitSpinnerVariant
+  status.className = 'pinokio-install-inline-status pinokio-process-wait-footer-status is-progress'
+  status.innerHTML = `
+    <div class="install-status-shell">
+      ${PINOKIO_INSTALL_STATUS_SPINNER_HTML}
+      <div class="install-status-copy">
+        <div class="install-status-title">${escapePinokioStatusHtml(title)}</div>
+        ${description ? `<div class="install-status-detail">${escapePinokioStatusHtml(description)}</div>` : ''}
+      </div>
+    </div>
+  `
+  status.hidden = false
+  document.body.classList.add('pinokio-install-status-visible')
+}
+
+function hidePinokioWaitFooterStatus() {
+  const status = document.getElementById(PINOKIO_WAIT_FOOTER_ID)
+  if (!status) {
+    return
+  }
+  status.hidden = true
+  status.innerHTML = ''
+  document.body.classList.remove('pinokio-install-status-visible')
+}
+
+if (typeof window !== 'undefined') {
+  window.PinokioWaitFooterStatus = {
+    show: showPinokioWaitFooterStatus,
+    hide: hidePinokioWaitFooterStatus
+  }
+}
 function check_ready (targetUrl = null, options = {}) {
   createLauncherDebugLog('check_ready start');
   return fetch("/pinokio/requirements_ready").then((res) => {
@@ -3490,32 +3581,6 @@ document.addEventListener("DOMContentLoaded", () => {
     tools: null,
     toolsPromise: null
   };
-  const ASK_AI_FALLBACK_TOOLS = [
-    {
-      value: 'claude',
-      label: 'Claude Code',
-      iconSrc: '/asset/plugin/code/claude/claude.png',
-      href: '/run/plugin/code/claude/pinokio.js',
-      category: 'CLI',
-      isDefault: true
-    },
-    {
-      value: 'codex',
-      label: 'OpenAI Codex',
-      iconSrc: '/asset/plugin/code/codex/openai.webp',
-      href: '/run/plugin/code/codex/pinokio.js',
-      category: 'CLI',
-      isDefault: false
-    },
-    {
-      value: 'gemini',
-      label: 'Google Gemini CLI',
-      iconSrc: '/asset/plugin/code/gemini/gemini.jpeg',
-      href: '/run/plugin/code/gemini/pinokio.js',
-      category: 'CLI',
-      isDefault: false
-    }
-  ];
 
   initializeUniversalLauncherIntegration();
   initializeCreateLauncherIntegration();
@@ -3928,6 +3993,7 @@ document.addEventListener("DOMContentLoaded", () => {
     return typeof pathname === 'string'
       && (
         pathname.startsWith('/run/plugin/')
+        || pathname.startsWith('/pinokio/run/plugin/')
         || (pathname.startsWith('/run/api/') && /\/pinokio\.js$/i.test(pathname))
       );
   }
@@ -4019,11 +4085,11 @@ document.addEventListener("DOMContentLoaded", () => {
       })
       .then((payload) => {
         const mapped = mapPluginMenuToAskAiTools(payload && Array.isArray(payload.menu) ? payload.menu : []);
-        return mapped.length > 0 ? mapped : ASK_AI_FALLBACK_TOOLS.slice();
+        return mapped;
       })
       .catch((error) => {
-        console.warn('Failed to load Ask AI plugins, using fallback list', error);
-        return ASK_AI_FALLBACK_TOOLS.slice();
+        console.warn('Failed to load Ask AI plugins', error);
+        return [];
       })
       .finally(() => {
         askAiState.toolsPromise = null;

package/server/public/create-launcher.js

@@ -5,33 +5,6 @@
     return;
   }
 
-  const FALLBACK_TOOLS = [
-    {
-      value: 'claude',
-      label: 'Claude Code',
-      iconSrc: '/asset/plugin/code/claude/claude.png',
-      isDefault: true,
-      href: '/run/plugin/code/claude/pinokio.js',
-      category: 'CLI',
-    },
-    {
-      value: 'codex',
-      label: 'OpenAI Codex',
-      iconSrc: '/asset/plugin/code/codex/openai.webp',
-      isDefault: false,
-      href: '/run/plugin/code/codex/pinokio.js',
-      category: 'CLI',
-    },
-    {
-      value: 'gemini',
-      label: 'Google Gemini CLI',
-      iconSrc: '/asset/plugin/code/gemini/gemini.jpeg',
-      isDefault: false,
-      href: '/run/plugin/code/gemini/pinokio.js',
-      category: 'CLI',
-    },
-  ];
-
   const CATEGORY_ORDER = ['CLI', 'IDE'];
   const MODAL_VARIANTS = {
     CREATE: 'create',
@@ -83,7 +56,7 @@
 
         let value = '';
         if (href) {
-          // Normalize href to a plugin-relative path for the backend (e.g., code/codex)
+          // Normalize href to a launcher tool path for the backend.
           const normalized = href.replace(/^\/run/, '').replace(/^\/+/, '');
           const parts = normalized.split('/').filter(Boolean);
           // Expect /plugin/<path...>/pinokio.js -> want <path...>
@@ -139,11 +112,11 @@
       .then((data) => {
         const menu = data && Array.isArray(data.menu) ? data.menu : [];
         const tools = mapPluginMenuToCreateLauncherTools(menu);
-        return tools.length > 0 ? tools : FALLBACK_TOOLS.slice();
+        return tools;
       })
       .catch((error) => {
-        console.warn('Falling back to default plugins for create launcher modal', error);
-        return FALLBACK_TOOLS.slice();
+        console.warn('Failed to load create launcher plugins', error);
+        return [];
       })
       .finally(() => {
         loadingTools = null;

package/server/public/electron.css

@@ -28,8 +28,8 @@ aside {
 header.grabbable {
 /*
   padding: 32px 10px 0 !important;
-  padding: 26px 0px 0 !important;
   */
+  padding: 26px 0px 0 !important;
 }
 /*
 header {

package/server/public/style.css

@@ -2857,6 +2857,343 @@ body.dark .swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-can
 body.dark .swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel:hover {
   background: rgba(148, 163, 184, 0.18) !important;
 }
+.pinokio-install-inline-status .install-status-shell {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  min-height: 44px;
+}
+.pinokio-install-inline-status .install-status-copy {
+  min-width: 0;
+  flex: 1;
+}
+.pinokio-install-inline-status .install-status-title {
+  color: inherit;
+  font-size: 15px;
+  line-height: 1.2;
+  font-weight: 700;
+}
+.pinokio-install-inline-status .install-status-detail {
+  margin-top: 4px;
+  color: rgba(235, 222, 197, 0.82);
+  font-size: 12px;
+  line-height: 1.35;
+  word-break: break-word;
+}
+body.dark .pinokio-install-inline-status .install-status-detail {
+  color: rgba(239, 233, 214, 0.76);
+}
+.pinokio-install-inline-status .install-status-detail > *:first-child {
+  margin-top: 0;
+}
+.pinokio-install-inline-status .install-status-detail > *:last-child {
+  margin-bottom: 0;
+}
+.pinokio-install-inline-status .install-status-spinner {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+  margin-top: 1px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.pinokio-install-inline-status .install-status-grid-anchor,
+.pinokio-install-inline-status .install-status-grid-tile,
+.pinokio-install-inline-status .install-status-grid-chaser,
+.pinokio-install-inline-status .install-status-grid-pixel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  display: none;
+  transform-origin: center;
+}
+.pinokio-install-inline-status .install-status-grid-anchor,
+.pinokio-install-inline-status .install-status-grid-tile,
+.pinokio-install-inline-status .install-status-grid-chaser {
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+}
+.pinokio-install-inline-status .install-status-grid-anchor {
+  background: currentColor;
+  opacity: 0.16;
+}
+.pinokio-install-inline-status .install-status-grid-tile,
+.pinokio-install-inline-status .install-status-grid-chaser,
+.pinokio-install-inline-status .install-status-grid-pixel {
+  background: currentColor;
+}
+.pinokio-install-inline-status .install-status-grid-pixel {
+  width: 4px;
+  height: 4px;
+  border-radius: 1px;
+}
+.pinokio-install-inline-status .install-status-grid-anchor-1,
+.pinokio-install-inline-status .install-status-grid-tile-1,
+.pinokio-install-inline-status .install-status-grid-chaser {
+  top: 1px;
+  left: 1px;
+}
+.pinokio-install-inline-status .install-status-grid-anchor-2,
+.pinokio-install-inline-status .install-status-grid-tile-2 {
+  top: 1px;
+  left: 12px;
+}
+.pinokio-install-inline-status .install-status-grid-anchor-3,
+.pinokio-install-inline-status .install-status-grid-tile-3 {
+  top: 12px;
+  left: 12px;
+}
+.pinokio-install-inline-status .install-status-grid-anchor-4,
+.pinokio-install-inline-status .install-status-grid-tile-4 {
+  top: 12px;
+  left: 1px;
+}
+.pinokio-install-inline-status .install-status-grid-pixel {
+  top: 2px;
+  left: 2px;
+}
+[data-install-spinner-variant="grid-shift"] .pinokio-install-inline-status .install-status-grid-tile {
+  display: block;
+}
+[data-install-spinner-variant="grid-shift"] .pinokio-install-inline-status .install-status-grid-tile-1 {
+  animation: pinokio-grid-shift-1 1.2s cubic-bezier(0.6, 0, 0.2, 1) infinite;
+}
+[data-install-spinner-variant="grid-shift"] .pinokio-install-inline-status .install-status-grid-tile-2 {
+  animation: pinokio-grid-shift-2 1.2s cubic-bezier(0.6, 0, 0.2, 1) infinite;
+}
+[data-install-spinner-variant="grid-shift"] .pinokio-install-inline-status .install-status-grid-tile-3 {
+  animation: pinokio-grid-shift-3 1.2s cubic-bezier(0.6, 0, 0.2, 1) infinite;
+}
+[data-install-spinner-variant="grid-shift"] .pinokio-install-inline-status .install-status-grid-tile-4 {
+  animation: pinokio-grid-shift-4 1.2s cubic-bezier(0.6, 0, 0.2, 1) infinite;
+}
+[data-install-spinner-variant="single-vacancy"] .pinokio-install-inline-status .install-status-grid-anchor {
+  display: block;
+}
+[data-install-spinner-variant="single-vacancy"] .pinokio-install-inline-status .install-status-grid-tile-1,
+[data-install-spinner-variant="single-vacancy"] .pinokio-install-inline-status .install-status-grid-tile-2,
+[data-install-spinner-variant="single-vacancy"] .pinokio-install-inline-status .install-status-grid-tile-3 {
+  display: block;
+}
+[data-install-spinner-variant="single-vacancy"] .pinokio-install-inline-status .install-status-grid-tile-1 {
+  animation: pinokio-single-vacancy-1 1.55s cubic-bezier(0.62, 0, 0.22, 1) infinite;
+}
+[data-install-spinner-variant="single-vacancy"] .pinokio-install-inline-status .install-status-grid-tile-2 {
+  animation: pinokio-single-vacancy-2 1.55s cubic-bezier(0.62, 0, 0.22, 1) infinite;
+}
+[data-install-spinner-variant="single-vacancy"] .pinokio-install-inline-status .install-status-grid-tile-3 {
+  animation: pinokio-single-vacancy-3 1.55s cubic-bezier(0.62, 0, 0.22, 1) infinite;
+}
+[data-install-spinner-variant="pulse-swap"] .pinokio-install-inline-status .install-status-grid-tile {
+  display: block;
+}
+[data-install-spinner-variant="pulse-swap"] .pinokio-install-inline-status .install-status-grid-tile-1,
+[data-install-spinner-variant="pulse-swap"] .pinokio-install-inline-status .install-status-grid-tile-3 {
+  animation: pinokio-pulse-swap-a 1.18s ease-in-out infinite;
+}
+[data-install-spinner-variant="pulse-swap"] .pinokio-install-inline-status .install-status-grid-tile-2,
+[data-install-spinner-variant="pulse-swap"] .pinokio-install-inline-status .install-status-grid-tile-4 {
+  animation: pinokio-pulse-swap-b 1.18s ease-in-out infinite;
+}
+[data-install-spinner-variant="corner-chase"] .pinokio-install-inline-status .install-status-grid-anchor {
+  display: block;
+}
+[data-install-spinner-variant="corner-chase"] .pinokio-install-inline-status .install-status-grid-chaser {
+  display: block;
+  animation: pinokio-corner-chase 1.05s cubic-bezier(0.6, 0, 0.2, 1) infinite;
+}
+[data-install-spinner-variant="flip-2x2"] .pinokio-install-inline-status .install-status-grid-tile {
+  display: block;
+}
+[data-install-spinner-variant="flip-2x2"] .pinokio-install-inline-status .install-status-grid-tile-1 {
+  animation: pinokio-grid-flip-1 1.06s cubic-bezier(0.68, 0, 0.24, 1) infinite;
+}
+[data-install-spinner-variant="flip-2x2"] .pinokio-install-inline-status .install-status-grid-tile-2 {
+  animation: pinokio-grid-flip-2 1.06s cubic-bezier(0.68, 0, 0.24, 1) infinite;
+}
+[data-install-spinner-variant="flip-2x2"] .pinokio-install-inline-status .install-status-grid-tile-3 {
+  animation: pinokio-grid-flip-3 1.06s cubic-bezier(0.68, 0, 0.24, 1) infinite;
+}
+[data-install-spinner-variant="flip-2x2"] .pinokio-install-inline-status .install-status-grid-tile-4 {
+  animation: pinokio-grid-flip-4 1.06s cubic-bezier(0.68, 0, 0.24, 1) infinite;
+}
+[data-install-spinner-variant="stack-ripple"] .pinokio-install-inline-status .install-status-grid-tile {
+  display: block;
+  animation: pinokio-stack-ripple 1.15s ease-in-out infinite;
+}
+[data-install-spinner-variant="stack-ripple"] .pinokio-install-inline-status .install-status-grid-tile-2 {
+  animation-delay: -0.16s;
+}
+[data-install-spinner-variant="stack-ripple"] .pinokio-install-inline-status .install-status-grid-tile-3 {
+  animation-delay: -0.32s;
+}
+[data-install-spinner-variant="stack-ripple"] .pinokio-install-inline-status .install-status-grid-tile-4 {
+  animation-delay: -0.48s;
+}
+[data-install-spinner-variant="pixel-orbit"] .pinokio-install-inline-status .install-status-grid-anchor {
+  display: block;
+  width: 4px;
+  height: 4px;
+  border-radius: 1px;
+  opacity: 0.22;
+}
+[data-install-spinner-variant="pixel-orbit"] .pinokio-install-inline-status .install-status-grid-anchor-1 {
+  top: 2px;
+  left: 2px;
+}
+[data-install-spinner-variant="pixel-orbit"] .pinokio-install-inline-status .install-status-grid-anchor-2 {
+  top: 2px;
+  left: 14px;
+}
+[data-install-spinner-variant="pixel-orbit"] .pinokio-install-inline-status .install-status-grid-anchor-3 {
+  top: 14px;
+  left: 14px;
+}
+[data-install-spinner-variant="pixel-orbit"] .pinokio-install-inline-status .install-status-grid-anchor-4 {
+  top: 14px;
+  left: 2px;
+}
+[data-install-spinner-variant="pixel-orbit"] .pinokio-install-inline-status .install-status-grid-pixel {
+  display: block;
+  animation: pinokio-pixel-orbit 1s cubic-bezier(0.6, 0, 0.2, 1) infinite;
+}
+[data-install-spinner-variant="binary-shuffle"] .pinokio-install-inline-status .install-status-grid-anchor {
+  display: block;
+}
+[data-install-spinner-variant="binary-shuffle"] .pinokio-install-inline-status .install-status-grid-tile {
+  display: block;
+}
+[data-install-spinner-variant="binary-shuffle"] .pinokio-install-inline-status .install-status-grid-tile-1 {
+  animation: pinokio-binary-shuffle-1 1.1s steps(1, end) infinite;
+}
+[data-install-spinner-variant="binary-shuffle"] .pinokio-install-inline-status .install-status-grid-tile-2 {
+  animation: pinokio-binary-shuffle-2 1.1s steps(1, end) infinite;
+}
+[data-install-spinner-variant="binary-shuffle"] .pinokio-install-inline-status .install-status-grid-tile-3 {
+  animation: pinokio-binary-shuffle-3 1.1s steps(1, end) infinite;
+}
+[data-install-spinner-variant="binary-shuffle"] .pinokio-install-inline-status .install-status-grid-tile-4 {
+  animation: pinokio-binary-shuffle-4 1.1s steps(1, end) infinite;
+}
+@keyframes pinokio-grid-shift-1 {
+  0%, 100% { transform: translate(0, 0); }
+  25% { transform: translate(11px, 0); }
+  50% { transform: translate(11px, 11px); }
+  75% { transform: translate(0, 11px); }
+}
+@keyframes pinokio-grid-shift-2 {
+  0%, 100% { transform: translate(0, 0); }
+  25% { transform: translate(0, 11px); }
+  50% { transform: translate(-11px, 11px); }
+  75% { transform: translate(-11px, 0); }
+}
+@keyframes pinokio-grid-shift-3 {
+  0%, 100% { transform: translate(0, 0); }
+  25% { transform: translate(-11px, 0); }
+  50% { transform: translate(-11px, -11px); }
+  75% { transform: translate(0, -11px); }
+}
+@keyframes pinokio-grid-shift-4 {
+  0%, 100% { transform: translate(0, 0); }
+  25% { transform: translate(0, -11px); }
+  50% { transform: translate(11px, -11px); }
+  75% { transform: translate(11px, 0); }
+}
+@keyframes pinokio-single-vacancy-1 {
+  0%, 50% { transform: translate(0, 0); }
+  65%, 100% { transform: translate(11px, 0); }
+}
+@keyframes pinokio-single-vacancy-2 {
+  0%, 15% { transform: translate(0, 0); }
+  30%, 100% { transform: translate(0, 11px); }
+}
+@keyframes pinokio-single-vacancy-3 {
+  0% { transform: translate(0, 0); }
+  15%, 70% { transform: translate(-11px, 0); }
+  85%, 100% { transform: translate(-11px, -11px); }
+}
+@keyframes pinokio-pulse-swap-a {
+  0%, 45%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50%, 95% {
+    opacity: 0.34;
+    transform: scale(0.82);
+  }
+}
+@keyframes pinokio-pulse-swap-b {
+  0%, 45%, 100% {
+    opacity: 0.34;
+    transform: scale(0.82);
+  }
+  50%, 95% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes pinokio-corner-chase {
+  0%, 100% { transform: translate(0, 0); }
+  25% { transform: translate(11px, 0); }
+  50% { transform: translate(11px, 11px); }
+  75% { transform: translate(0, 11px); }
+}
+@keyframes pinokio-grid-flip-1 {
+  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
+  50% { transform: translate(11px, 0) scale(0.86); opacity: 0.72; }
+}
+@keyframes pinokio-grid-flip-2 {
+  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
+  50% { transform: translate(-11px, 0) scale(0.86); opacity: 0.72; }
+}
+@keyframes pinokio-grid-flip-3 {
+  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
+  50% { transform: translate(-11px, 0) scale(0.86); opacity: 0.72; }
+}
+@keyframes pinokio-grid-flip-4 {
+  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
+  50% { transform: translate(11px, 0) scale(0.86); opacity: 0.72; }
+}
+@keyframes pinokio-stack-ripple {
+  0%, 100% {
+    opacity: 0.38;
+    transform: scale(0.76);
+  }
+  30% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  55% {
+    opacity: 0.62;
+    transform: scale(0.9);
+  }
+}
+@keyframes pinokio-pixel-orbit {
+  0%, 100% { transform: translate(0, 0); }
+  25% { transform: translate(12px, 0); }
+  50% { transform: translate(12px, 12px); }
+  75% { transform: translate(0, 12px); }
+}
+@keyframes pinokio-binary-shuffle-1 {
+  0%, 24%, 75%, 100% { opacity: 1; transform: scale(1); }
+  25%, 74% { opacity: 0; transform: scale(0.82); }
+}
+@keyframes pinokio-binary-shuffle-2 {
+  0%, 24%, 75%, 100% { opacity: 0; transform: scale(0.82); }
+  25%, 74% { opacity: 1; transform: scale(1); }
+}
+@keyframes pinokio-binary-shuffle-3 {
+  0%, 49% { opacity: 1; transform: scale(1); }
+  50%, 100% { opacity: 0; transform: scale(0.82); }
+}
+@keyframes pinokio-binary-shuffle-4 {
+  0%, 49% { opacity: 0; transform: scale(0.82); }
+  50%, 100% { opacity: 1; transform: scale(1); }
+}
 .pinokio-install-inline-status {
   padding: 14px 18px;
   box-sizing: border-box;