pinokiod 7.5.15 → 7.5.16

package/kernel/api/hf/index.js

@@ -1,7 +1,301 @@
-const path = require('path')
 const unparse = require('yargs-unparser-custom-flag');
 const Shell = require('../shell')
+const Util = require('../../util')
+const HtmlModal = require('../htmlmodal')
+
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+const positiveNumber = (value, fallback) => {
+  const number = Number(value)
+  return Number.isFinite(number) && number > 0 ? number : fallback
+}
+const escapeHtml = (value) => String(value == null ? "" : value)
+  .replace(/&/g, "&")
+  .replace(/</g, "&lt;")
+  .replace(/>/g, "&gt;")
+  .replace(/"/g, "&quot;")
+  .replace(/'/g, "&#39;")
+
 class HF {
+  constructor() {
+    this.htmlModal = new HtmlModal()
+  }
+  connect(kernel, method) {
+    if (!kernel || !kernel.connect || typeof kernel.connect[method] !== "function") {
+      throw new Error(`Hugging Face connect ${method} is not available`)
+    }
+    return kernel.connect
+  }
+  safeKeys(keys) {
+    if (!keys || !keys.access_token) {
+      return keys
+    }
+    return {
+      token_path: keys.token_path
+    }
+  }
+  async copyCode(login, ondata, options = {}) {
+    if (!login || !login.user_code) {
+      return null
+    }
+    try {
+      await Util.clipboard({
+        type: "copy",
+        text: login.user_code
+      })
+      if (ondata && !options.silent) {
+        ondata({ raw: `\r\nHugging Face code copied to clipboard: ${login.user_code}\r\n` })
+      }
+      return { ok: true }
+    } catch (error) {
+      const message = error && error.message ? error.message : String(error)
+      if (ondata && !options.silent) {
+        ondata({ raw: `\r\nCopy this Hugging Face code into the browser: ${login.user_code}\r\n` })
+        ondata({ raw: `Clipboard copy failed: ${message}\r\n` })
+      }
+      return { ok: false, error: message }
+    }
+  }
+  canDispatchModal(req, ondata, kernel) {
+    return !!(
+      ondata
+      && kernel
+      && kernel.api
+      && typeof kernel.api.wait === "function"
+      && req
+      && req.parent
+      && (req.parent.id || req.parent.path)
+    )
+  }
+  canUseModal(req, ondata, kernel, url) {
+    return !!(url && this.canDispatchModal(req, ondata, kernel))
+  }
+  modalRequest(req, modalId, params = {}) {
+    return {
+      params: Object.assign({ id: modalId }, params),
+      parent: req.parent,
+      cwd: req.cwd
+    }
+  }
+  modalId(req) {
+    const id = req && req.parent ? (req.parent.id || req.parent.path) : "hf-login"
+    return `hf-login:${id}`
+  }
+  loginModalHtml(login, clipboard) {
+    const code = escapeHtml(login.user_code || "")
+    const expires = login.expires_in
+      ? `<p class="hf-login-modal-note">Expires in ${escapeHtml(login.expires_in)} seconds.</p>`
+      : ""
+    let copyText = "Copy this code if Hugging Face asks for it."
+    let copyClass = "neutral"
+    if (clipboard && clipboard.ok) {
+      copyText = "The code has been copied to your clipboard."
+      copyClass = "success"
+    } else if (clipboard && clipboard.ok === false) {
+      copyText = `Clipboard copy failed. The code is displayed below.`
+      copyClass = "warning"
+    }
+    return `
+      <div class="hf-login-modal">
+        <div class="hf-login-modal-copy ${copyClass}">${escapeHtml(copyText)}</div>
+        <div class="hf-login-modal-code" aria-label="Hugging Face device code">${code}</div>
+        ${expires}
+        <p>Open Hugging Face to finish login. Pinokio will continue automatically.</p>
+      </div>
+    `
+  }
+  async promptLoginModal(req, ondata, kernel, login, clipboard) {
+    const modalId = this.modalId(req)
+    const response = await this.htmlModal.open(
+      this.modalRequest(req, modalId, {
+        title: "Log in to Hugging Face",
+        variant: "minimal",
+        html: this.loginModalHtml(login, clipboard),
+        status: { text: "Waiting for you to open Hugging Face.", waiting: false },
+        actions: [{
+          id: "open",
+          label: "Open Hugging Face",
+          type: "submit",
+          href: login.verification_uri_complete,
+          target: "_blank",
+          features: "browser",
+          primary: true,
+          close: false,
+          icon: "fa-solid fa-arrow-up-right-from-square"
+        }, {
+          id: "cancel",
+          label: "Cancel",
+          type: "submit",
+          variant: "secondary"
+        }],
+        actionsAlign: "end",
+        await: true,
+        dismissible: false
+      }),
+      ondata,
+      kernel
+    )
+
+    if (!response || response.action === "cancel" || response.action === "dismissed") {
+      await this.htmlModal.close(this.modalRequest(req, modalId), ondata, kernel)
+      throw new Error("Hugging Face login canceled.")
+    }
+
+    await this.htmlModal.update(
+      this.modalRequest(req, modalId, {
+        variant: "minimal",
+        status: { text: "Waiting for Hugging Face authorization to finish...", waiting: true },
+        actions: [{
+          id: "open-again",
+          label: "Open Again",
+          type: "link",
+          href: login.verification_uri_complete,
+          target: "_blank",
+          features: "browser",
+          variant: "secondary",
+          icon: "fa-solid fa-arrow-up-right-from-square"
+        }],
+        actionsAlign: "end",
+        dismissible: false
+      }),
+      ondata,
+      kernel
+    )
+    return response
+  }
+  async closeLoginModal(req, ondata, kernel) {
+    if (!this.canDispatchModal(req, ondata, kernel)) {
+      return
+    }
+    await this.htmlModal.close(this.modalRequest(req, this.modalId(req)), ondata, kernel)
+  }
+  async cancelLogin(connect, params) {
+    if (connect && typeof connect.cancelLogin === "function") {
+      await connect.cancelLogin("huggingface", params || {})
+    }
+  }
+  /*
+  {
+    "method": "hf.login",
+    "params": {
+      "force": false,
+      "open": true,
+      "modal": true,
+      "clipboard": true,
+      "wait": true,
+      "timeout": 120000,
+      "interval": 2000
+    }
+  }
+
+  Starts the existing Hugging Face device login provider. By default it shows a
+  blocking modal with the copied code and waits for the user to open the
+  verification URL before polling for the managed token.
+  */
+  async login(req, ondata, kernel) {
+    const connect = this.connect(kernel, "keys")
+    const params = req.params || {}
+    const force = params.force === true
+    const shouldOpen = params.open !== false
+    const shouldModal = params.modal !== false
+    const shouldCopy = params.clipboard !== false
+    const shouldWait = params.wait !== false
+    const timeout = positiveNumber(params.timeout, 120000)
+    const interval = positiveNumber(params.interval, 2000)
+
+    if (!force) {
+      const existing = await connect.keys("huggingface")
+      if (existing && existing.access_token) {
+        return {
+          status: "success",
+          already_logged_in: true,
+          ...this.safeKeys(existing)
+        }
+      }
+    }
+
+    if (typeof connect.login !== "function") {
+      throw new Error("Hugging Face connect login is not available")
+    }
+    const response = await connect.login("huggingface", params)
+    if (!response || response.status === "error") {
+      return response
+    }
+
+    const login = response.login || {}
+    const url = login.verification_uri_complete
+    const useModal = shouldModal && this.canUseModal(req, ondata, kernel, url)
+    if (shouldCopy && login.user_code) {
+      response.clipboard = await this.copyCode(login, ondata, { silent: useModal })
+    } else if (login.user_code && ondata && !useModal) {
+      ondata({ raw: `\r\nHugging Face code: ${login.user_code}\r\n` })
+    }
+
+    if (useModal) {
+      try {
+        response.open = await this.promptLoginModal(req, ondata, kernel, login, response.clipboard)
+      } catch (error) {
+        await this.cancelLogin(connect, params)
+        throw error
+      }
+    } else if (shouldOpen && url) {
+      if (ondata) {
+        if (!shouldModal) {
+          ondata({ raw: "\r\nHugging Face login modal disabled.\r\n" })
+        }
+        const codeHint = response.clipboard && response.clipboard.ok
+          ? "The code is already on your clipboard; paste it if Hugging Face asks."
+          : "If Hugging Face asks for a code, use the code printed above."
+        ondata({ raw: `Opening Hugging Face login: ${url}\r\n${codeHint}\r\n` })
+        if (response.clipboard && response.clipboard.ok === false) {
+          ondata({ raw: "The browser is opening even though clipboard copy failed.\r\n" })
+        }
+      }
+      response.open = await Util.openURI(url)
+    }
+
+    if (!shouldWait) {
+      if (useModal) {
+        await this.closeLoginModal(req, ondata, kernel)
+      }
+      return response
+    }
+
+    const startedAt = Date.now()
+    while (Date.now() - startedAt < timeout) {
+      const keys = await connect.keys("huggingface")
+      if (keys && keys.access_token) {
+        if (useModal) {
+          await this.closeLoginModal(req, ondata, kernel)
+        }
+        return {
+          ...response,
+          status: "success",
+          ...this.safeKeys(keys)
+        }
+      }
+      await delay(interval)
+    }
+
+    if (useModal) {
+      await this.closeLoginModal(req, ondata, kernel)
+    }
+    await this.cancelLogin(connect, params)
+    return {
+      ...response,
+      status: "timeout",
+      error: "Timed out waiting for Hugging Face login to finish."
+    }
+  }
+  /*
+  {
+    "method": "hf.logout"
+  }
+  */
+  async logout(req, ondata, kernel) {
+    const connect = this.connect(kernel, "logout")
+    await connect.logout("huggingface", req.params || {})
+    return { status: "success" }
+  }
   /*
   {
     "method": "hf.download",

package/kernel/connect/index.js

@@ -32,6 +32,12 @@ class Connect {
     let res = await this.clients[provider].logout(req)
     return res
   }
+  async cancelLogin(provider, req) {
+    if (this.clients[provider] && this.clients[provider].cancelLogin) {
+      return await this.clients[provider].cancelLogin(req)
+    }
+    return null
+  }
   async keys(provider) {
     let res = await this.clients[provider].keys()
     return res

package/kernel/connect/providers/huggingface/index.js

@@ -227,6 +227,20 @@ class Huggingface {
     await this.runHf(["auth", "logout"]).catch(() => {})
     await fs.promises.rm(this.kernel.path("connect", "huggingface"), { recursive: true, force: true }).catch(() => {})
   }
+  async cancelLogin() {
+    const session = this.loginSession
+    if (!session || session.status !== "pending") {
+      return
+    }
+    session.status = "canceled"
+    session.error = "Hugging Face login canceled."
+    if (session.child) {
+      session.child.kill()
+    }
+    if (this.loginSession === session) {
+      this.loginSession = null
+    }
+  }
   async logout() {
     await this.destroy()
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "7.5.15",
+  "version": "7.5.16",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/public/htmlmodal.js

@@ -15,21 +15,43 @@
     style.id = 'htmlmodal-style'
     style.textContent = `
       .htmlmodal-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, 0.72); backdrop-filter: blur(6px); z-index: 1000000000005; padding: 32px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, visibility 0.18s ease; }
+      .htmlmodal-overlay.minimal { background: rgba(9, 11, 15, 0.34); backdrop-filter: none; padding: 24px; }
+      body.dark .htmlmodal-overlay.minimal { background: rgba(0, 0, 0, 0.58); }
       .htmlmodal-overlay.visible { opacity: 1; visibility: visible; pointer-events: auto; }
       .htmlmodal-window { width: min(560px, 100%); max-height: calc(100vh - 64px); background: #0f172a; color: #f8fafc; border-radius: 18px; box-shadow: 0 30px 60px rgba(0,0,0,0.45); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(148,163,184,0.2); }
+      .htmlmodal-window.minimal { width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: #ffffff; color: #18181b; border-radius: 8px; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16); border-color: rgba(24, 24, 27, 0.12); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+      body.dark .htmlmodal-window.minimal { background: #1b1c1d; color: rgba(250, 250, 250, 0.94); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42); }
       .htmlmodal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 12px; }
+      .htmlmodal-window.minimal .htmlmodal-header { gap: 16px; padding: 20px 20px 12px; }
       .htmlmodal-title { font-size: 1.15rem; font-weight: 600; }
+      .htmlmodal-window.minimal .htmlmodal-title { font-size: 16px; line-height: 1.25; letter-spacing: 0; }
       .htmlmodal-close { background: none; border: none; color: #cbd5f5; font-size: 20px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
       .htmlmodal-close:hover { background: rgba(255,255,255,0.08); }
+      .htmlmodal-window.minimal .htmlmodal-close { width: 28px; height: 28px; margin: -6px -6px 0 0; background: transparent; border: 1px solid transparent; color: #71717a; font: inherit; font-size: 18px; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
+      .htmlmodal-window.minimal .htmlmodal-close:hover, .htmlmodal-window.minimal .htmlmodal-close:focus-visible { background: rgba(24, 24, 27, 0.06); color: #18181b; outline: none; }
+      body.dark .htmlmodal-window.minimal .htmlmodal-close { color: rgba(229, 231, 235, 0.58); }
+      body.dark .htmlmodal-window.minimal .htmlmodal-close:hover, body.dark .htmlmodal-window.minimal .htmlmodal-close:focus-visible { background: rgba(255, 255, 255, 0.07); color: rgba(250, 250, 250, 0.94); }
       .htmlmodal-body { padding: 0 24px 16px; overflow-y: auto; font-size: 0.95rem; line-height: 1.5; }
+      .htmlmodal-window.minimal .htmlmodal-body { padding: 0 20px; color: #71717a; font-size: 13px; line-height: 1.45; }
+      body.dark .htmlmodal-window.minimal .htmlmodal-body { color: rgba(229, 231, 235, 0.62); }
       .htmlmodal-body p { margin: 0 0 0.85rem; }
+      .htmlmodal-window.minimal .htmlmodal-body p { margin: 0 0 10px; }
       .htmlmodal-status { padding: 0 24px 18px; font-size: 0.9rem; color: #cbd5f5; display: flex; align-items: center; gap: 10px; }
+      .htmlmodal-window.minimal .htmlmodal-status { padding: 12px 20px 0; font-size: 13px; line-height: 1.4; color: #71717a; gap: 8px; }
+      body.dark .htmlmodal-window.minimal .htmlmodal-status { color: rgba(229, 231, 235, 0.62); }
       .htmlmodal-status.hidden { display: none; }
       .htmlmodal-status.error { color: #fecaca; }
       .htmlmodal-status.success { color: #bbf7d0; }
+      .htmlmodal-window.minimal .htmlmodal-status.error { color: #b91c1c; }
+      .htmlmodal-window.minimal .htmlmodal-status.success { color: #15803d; }
+      body.dark .htmlmodal-window.minimal .htmlmodal-status.error { color: #fca5a5; }
+      body.dark .htmlmodal-window.minimal .htmlmodal-status.success { color: #86efac; }
       .htmlmodal-status .spinner { width: 18px; height: 18px; border: 2px solid rgba(248, 250, 252, 0.2); border-top-color: #38bdf8; border-radius: 50%; animation: htmlmodal-spin 0.9s linear infinite; }
+      .htmlmodal-window.minimal .htmlmodal-status .spinner { width: 14px; height: 14px; border-color: rgba(24, 24, 27, 0.14); border-top-color: #18181b; }
+      body.dark .htmlmodal-window.minimal .htmlmodal-status .spinner { border-color: rgba(255, 255, 255, 0.16); border-top-color: rgba(250, 250, 250, 0.94); }
       @keyframes htmlmodal-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
       .htmlmodal-actions { padding: 0 24px 24px; display: flex; flex-wrap: wrap; gap: 10px; }
+      .htmlmodal-window.minimal .htmlmodal-actions { padding: 16px 20px 20px; gap: 8px; justify-content: flex-end; }
       .htmlmodal-actions .btn { border-radius: 999px; border: 1px solid transparent; padding: 10px 18px; font-size: 0.9rem; cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease; }
       .htmlmodal-actions .btn.primary { background: #38bdf8; color: #0f172a; }
       .htmlmodal-actions .btn.primary:hover { background: #0ea5e9; transform: translateY(-1px); }
@@ -37,7 +59,31 @@
       .htmlmodal-actions .btn.secondary:hover { background: rgba(148,163,184,0.3); }
       .htmlmodal-actions .btn.link { background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.55); color: #38bdf8; padding: 10px 18px; }
       .htmlmodal-actions .btn.link:hover { background: rgba(56,189,248,0.2); color: #7dd3fc; transform: translateY(-1px); }
+      .htmlmodal-window.minimal .htmlmodal-actions .btn { min-height: 32px; border-radius: 6px; border: 1px solid rgba(24, 24, 27, 0.12); padding: 0 12px; background: transparent; color: #52525b; font: inherit; font-size: 13px; font-weight: 600; justify-content: center; box-shadow: none; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease; }
+      .htmlmodal-window.minimal .htmlmodal-actions .btn.primary { background: #18181b; border-color: #18181b; color: #ffffff; }
+      .htmlmodal-window.minimal .htmlmodal-actions .btn.primary:hover, .htmlmodal-window.minimal .htmlmodal-actions .btn.primary:focus-visible { background: #27272a; border-color: #27272a; outline: none; transform: none; }
+      .htmlmodal-window.minimal .htmlmodal-actions .btn.secondary:hover, .htmlmodal-window.minimal .htmlmodal-actions .btn.secondary:focus-visible, .htmlmodal-window.minimal .htmlmodal-actions .btn.link:hover, .htmlmodal-window.minimal .htmlmodal-actions .btn.link:focus-visible { background: rgba(24, 24, 27, 0.06); color: #18181b; outline: none; transform: none; }
+      .htmlmodal-window.minimal .htmlmodal-actions .btn.link { color: #52525b; }
+      body.dark .htmlmodal-window.minimal .htmlmodal-actions .btn { border-color: rgba(255, 255, 255, 0.1); color: rgba(229, 231, 235, 0.7); }
+      body.dark .htmlmodal-window.minimal .htmlmodal-actions .btn.primary { background: rgba(250, 250, 250, 0.94); border-color: rgba(250, 250, 250, 0.94); color: #1b1c1d; }
+      body.dark .htmlmodal-window.minimal .htmlmodal-actions .btn.primary:hover, body.dark .htmlmodal-window.minimal .htmlmodal-actions .btn.primary:focus-visible { background: #ffffff; border-color: #ffffff; color: #18181b; }
+      body.dark .htmlmodal-window.minimal .htmlmodal-actions .btn.secondary:hover, body.dark .htmlmodal-window.minimal .htmlmodal-actions .btn.secondary:focus-visible, body.dark .htmlmodal-window.minimal .htmlmodal-actions .btn.link:hover, body.dark .htmlmodal-window.minimal .htmlmodal-actions .btn.link:focus-visible { background: rgba(255, 255, 255, 0.07); color: rgba(250, 250, 250, 0.94); }
       .htmlmodal-actions .btn:disabled { opacity: 0.6; cursor: not-allowed; }
+      .hf-login-modal { display: flex; flex-direction: column; gap: 10px; }
+      .hf-login-modal p { margin: 0; }
+      .hf-login-modal-copy { font-size: 12px; color: #71717a; }
+      .hf-login-modal-copy.warning { color: #b45309; }
+      body.dark .hf-login-modal-copy { color: rgba(229, 231, 235, 0.62); }
+      body.dark .hf-login-modal-copy.warning { color: #fbbf24; }
+      .hf-login-modal-code { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 6px; background: rgba(24, 24, 27, 0.03); border: 1px solid rgba(24, 24, 27, 0.12); color: #18181b; font: 600 20px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing: 0; text-align: center; user-select: all; }
+      body.dark .hf-login-modal-code { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); color: rgba(250, 250, 250, 0.94); }
+      .hf-login-modal-note { font-size: 12px; color: inherit !important; }
+      @media only screen and (max-width: 480px) {
+        .htmlmodal-overlay.minimal { padding: 16px; }
+        .htmlmodal-window.minimal { width: calc(100vw - 32px); }
+        .htmlmodal-window.minimal .htmlmodal-actions { flex-direction: column-reverse; align-items: stretch; }
+        .htmlmodal-window.minimal .htmlmodal-actions .btn { width: 100%; }
+      }
     `
     document.head.appendChild(style)
   }
@@ -76,7 +122,8 @@
         awaiting: null,
         actions: [],
         socket: null,
-        dismissible: true
+        dismissible: true,
+        variant: null
       }
     }
 
@@ -94,11 +141,15 @@
       }
       if (action === 'open') {
         this.current.id = payload.id
+        this.current.dismissible = true
+        this.closeBtn.style.display = 'inline-flex'
+        this.setVariant(payload.variant)
         this.show()
         this.render(payload)
       } else if (action === 'update') {
         if (!this.current.id) {
           this.current.id = payload.id
+          this.setVariant(payload.variant)
           this.show()
         }
         this.render(payload)
@@ -121,6 +172,16 @@
       this.overlay.classList.remove('visible')
       this.current.id = null
       this.current.actions = []
+      this.current.dismissible = true
+      this.closeBtn.style.display = 'inline-flex'
+      this.setVariant(null)
+    }
+
+    setVariant(variant) {
+      const name = variant === 'minimal' ? 'minimal' : null
+      this.current.variant = name
+      this.overlay.classList.toggle('minimal', name === 'minimal')
+      this.window.classList.toggle('minimal', name === 'minimal')
     }
 
     setTitle(title) {
@@ -190,8 +251,11 @@
         if (action.icon) {
           link.innerHTML = `<i class="${action.icon}"></i> ${link.textContent}`
         }
-        link.addEventListener('click', () => {
-          // keep modal open, just open link
+        link.addEventListener('click', (event) => {
+          if (action.features) {
+            event.preventDefault()
+            this.handleAction(action)
+          }
         })
         return link
       }
@@ -212,14 +276,13 @@
 
     buildButtonClass(action, fallback = 'secondary') {
       const classes = ['btn']
-      if (action && action.variant) {
+      if (action && action.primary) {
+        classes.push('primary')
+      } else if (action && action.variant) {
         classes.push(action.variant)
       } else {
         classes.push(fallback)
       }
-      if (action && action.primary) {
-        classes.push('primary')
-      }
       return classes.join(' ')
     }
 
@@ -232,6 +295,9 @@
         window.open(action.href, target, action.features || 'noopener')
         return
       }
+      if (action.type === 'submit' && action.href) {
+        window.open(action.href, action.target || '_blank', action.features || 'noopener')
+      }
       if (action.type === 'submit' && this.current.awaiting && this.current.socket) {
         this.emitResponse({ action: action.id || 'submit', payload: action.payload || null })
         if (action.close !== false) {
@@ -240,7 +306,7 @@
       } else if (action.type === 'button' && this.current.socket && this.current.awaiting) {
         this.emitResponse({ action: action.id || 'button', payload: action.payload || null })
       } else if (action.type === 'button' && action.href) {
-        window.open(action.href, action.target || '_blank')
+        window.open(action.href, action.target || '_blank', action.features || 'noopener')
       }
     }
 
@@ -282,7 +348,10 @@
           this.actions.style.justifyContent = 'flex-start'
         }
       } else {
-        this.actions.style.justifyContent = 'flex-start'
+        this.actions.style.justifyContent = ''
+      }
+      if (Object.prototype.hasOwnProperty.call(payload, 'variant')) {
+        this.setVariant(payload.variant)
       }
       if (Object.prototype.hasOwnProperty.call(payload, 'dismissible')) {
         this.current.dismissible = Boolean(payload.dismissible)

package/server/public/universal-launcher.js

@@ -513,6 +513,34 @@
     }
   }
 
+  function ensureSocketReady() {
+    if (typeof Socket === 'function') {
+      return Promise.resolve(Socket);
+    }
+    return new Promise((resolve, reject) => {
+      const target = document.head || document.body || document.documentElement;
+      if (!target) {
+        reject(new Error('Socket runtime is unavailable.'));
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.src = '/Socket.js';
+      script.async = true;
+      script.onload = () => {
+        if (typeof Socket === 'function') {
+          resolve(Socket);
+          return;
+        }
+        reject(new Error('Socket runtime failed to load.'));
+      };
+      script.onerror = () => {
+        reject(new Error('Socket runtime failed to load.'));
+      };
+      target.appendChild(script);
+    });
+  }
+
   async function checkLauncherInstallDestinationExists(relativePath, folderName) {
     const response = await fetch('/pinokio/install/exists', {
       method: 'POST',
@@ -4257,8 +4285,9 @@
       throw new Error('Download is unavailable right now.');
     }
     appendDownloadOutput(ui, `$ ${clone.message}\n\n`);
+    const SocketConstructor = await ensureSocketReady();
     await new Promise((resolve, reject) => {
-      const socket = new Socket();
+      const socket = new SocketConstructor();
       let settled = false;
       const settle = (fn, value) => {
         if (settled) {

package/test/hf-api.test.js

@@ -0,0 +1,435 @@
+const assert = require('node:assert/strict')
+const test = require('node:test')
+
+const HF = require('../kernel/api/hf')
+const Util = require('../kernel/util')
+
+const login = {
+  verification_uri_complete: 'https://huggingface.co/oauth/device?user_code=ABCD-EFGH',
+  user_code: 'ABCD-EFGH',
+  expires_in: 300
+}
+
+test('hf.login shows a modal, waits for the user to open Hugging Face, then closes after saved keys', async () => {
+  const hf = new HF()
+  const packets = []
+  const actions = []
+  const originalOpenURI = Util.openURI
+  const originalClipboard = Util.clipboard
+  let keyReads = 0
+  const loginCalls = []
+  const waitCalls = []
+  const kernel = {
+    connect: {
+      async keys(provider) {
+        assert.equal(provider, 'huggingface')
+        keyReads += 1
+        if (keyReads < 3) {
+          return null
+        }
+        return {
+          access_token: 'hf_secret',
+          token_path: '/tmp/pinokio/hf-token'
+        }
+      },
+      async login(provider, params) {
+        loginCalls.push({ provider, params })
+        return {
+          status: 'pending',
+          login,
+          token_path: '/tmp/pinokio/hf-token'
+        }
+      }
+    },
+    api: {
+      async wait(key) {
+        waitCalls.push(key)
+        return { action: 'open' }
+      }
+    }
+  }
+
+  Util.clipboard = async (req) => {
+    actions.push({ type: 'clipboard', req })
+  }
+  Util.openURI = async (uri) => {
+    actions.push({ type: 'openURI', uri })
+    return { ok: true, status: 'stubbed' }
+  }
+
+  try {
+    const result = await hf.login({
+      parent: { id: 'test-script', path: '/pinokio/api/test/hf-login.js' },
+      params: {
+        timeout: 100,
+        interval: 1
+      }
+    }, (stream, type) => packets.push({ type, stream }), kernel)
+
+    assert.deepEqual(loginCalls, [{ provider: 'huggingface', params: { timeout: 100, interval: 1 } }])
+    assert.deepEqual(waitCalls, ['/pinokio/api/test/hf-login.js'])
+    assert.deepEqual(actions, [{
+      type: 'clipboard',
+      req: {
+        type: 'copy',
+        text: 'ABCD-EFGH'
+      }
+    }])
+
+    assert.equal(packets.length, 3)
+    assert.equal(packets[0].type, 'htmlmodal')
+    assert.equal(packets[0].stream.action, 'open')
+    assert.equal(packets[0].stream.variant, 'minimal')
+    assert.equal(packets[0].stream.actionsAlign, 'end')
+    assert.equal(packets[0].stream.await, true)
+    assert.equal(packets[0].stream.awaitKey, '/pinokio/api/test/hf-login.js')
+    assert.equal(packets[0].stream.dismissible, false)
+    assert.match(packets[0].stream.html, /ABCD-EFGH/)
+    assert.match(packets[0].stream.html, /copied to your clipboard/)
+    assert.deepEqual(packets[0].stream.actions[0], {
+      id: 'open',
+      label: 'Open Hugging Face',
+      type: 'submit',
+      href: 'https://huggingface.co/oauth/device?user_code=ABCD-EFGH',
+      target: '_blank',
+      features: 'browser',
+      primary: true,
+      close: false,
+      icon: 'fa-solid fa-arrow-up-right-from-square'
+    })
+
+    assert.equal(packets[1].type, 'htmlmodal')
+    assert.equal(packets[1].stream.action, 'update')
+    assert.equal(packets[1].stream.variant, 'minimal')
+    assert.equal(packets[1].stream.actionsAlign, 'end')
+    assert.equal(packets[1].stream.status.waiting, true)
+    assert.deepEqual(packets[1].stream.actions[0], {
+      id: 'open-again',
+      label: 'Open Again',
+      type: 'link',
+      href: 'https://huggingface.co/oauth/device?user_code=ABCD-EFGH',
+      target: '_blank',
+      features: 'browser',
+      variant: 'secondary',
+      icon: 'fa-solid fa-arrow-up-right-from-square'
+    })
+
+    assert.equal(packets[2].type, 'htmlmodal')
+    assert.equal(packets[2].stream.action, 'close')
+
+    assert.deepEqual(result, {
+      status: 'success',
+      login,
+      token_path: '/tmp/pinokio/hf-token',
+      clipboard: { ok: true },
+      open: { action: 'open' }
+    })
+  } finally {
+    Util.openURI = originalOpenURI
+    Util.clipboard = originalClipboard
+  }
+})
+
+test('hf.login returns success without opening anything when already logged in', async () => {
+  const hf = new HF()
+  const opened = []
+  const copied = []
+  const originalOpenURI = Util.openURI
+  const originalClipboard = Util.clipboard
+  const kernel = {
+    connect: {
+      async keys(provider) {
+        assert.equal(provider, 'huggingface')
+        return {
+          access_token: 'hf_secret',
+          token_path: '/tmp/pinokio/hf-token'
+        }
+      }
+    }
+  }
+
+  Util.openURI = async (uri) => {
+    opened.push(uri)
+    return { ok: true, status: 'stubbed' }
+  }
+  Util.clipboard = async (req) => {
+    copied.push(req)
+  }
+
+  try {
+    const result = await hf.login({ params: {} }, () => {}, kernel)
+
+    assert.deepEqual(opened, [])
+    assert.deepEqual(copied, [])
+    assert.deepEqual(result, {
+      status: 'success',
+      already_logged_in: true,
+      token_path: '/tmp/pinokio/hf-token'
+    })
+  } finally {
+    Util.openURI = originalOpenURI
+    Util.clipboard = originalClipboard
+  }
+})
+
+test('hf.login can use the non-modal browser fallback when modal is disabled', async () => {
+  const hf = new HF()
+  const opened = []
+  const copied = []
+  const output = []
+  const originalOpenURI = Util.openURI
+  const originalClipboard = Util.clipboard
+  const kernel = {
+    connect: {
+      async keys(provider) {
+        assert.equal(provider, 'huggingface')
+        return null
+      },
+      async login(provider, params) {
+        assert.equal(provider, 'huggingface')
+        assert.deepEqual(params, { modal: false, wait: false })
+        return {
+          status: 'pending',
+          login,
+          token_path: '/tmp/pinokio/hf-token'
+        }
+      }
+    }
+  }
+
+  Util.clipboard = async (req) => {
+    copied.push(req)
+  }
+  Util.openURI = async (uri) => {
+    opened.push(uri)
+    return { ok: true, status: 'stubbed' }
+  }
+
+  try {
+    const result = await hf.login({ params: { modal: false, wait: false } }, (chunk) => output.push(chunk), kernel)
+
+    assert.deepEqual(copied, [{
+      type: 'copy',
+      text: 'ABCD-EFGH'
+    }])
+    assert.deepEqual(opened, ['https://huggingface.co/oauth/device?user_code=ABCD-EFGH'])
+    assert.deepEqual(output, [
+      { raw: '\r\nHugging Face code copied to clipboard: ABCD-EFGH\r\n' },
+      { raw: '\r\nHugging Face login modal disabled.\r\n' },
+      { raw: 'Opening Hugging Face login: https://huggingface.co/oauth/device?user_code=ABCD-EFGH\r\nThe code is already on your clipboard; paste it if Hugging Face asks.\r\n' }
+    ])
+    assert.deepEqual(result, {
+      status: 'pending',
+      login,
+      token_path: '/tmp/pinokio/hf-token',
+      clipboard: { ok: true },
+      open: { ok: true, status: 'stubbed' }
+    })
+  } finally {
+    Util.openURI = originalOpenURI
+    Util.clipboard = originalClipboard
+  }
+})
+
+test('hf.login modal displays clipboard failure without opening the browser automatically', async () => {
+  const hf = new HF()
+  const packets = []
+  const opened = []
+  const originalOpenURI = Util.openURI
+  const originalClipboard = Util.clipboard
+  const kernel = {
+    connect: {
+      async keys(provider) {
+        assert.equal(provider, 'huggingface')
+        return null
+      },
+      async login(provider) {
+        assert.equal(provider, 'huggingface')
+        return {
+          status: 'pending',
+          login,
+          token_path: '/tmp/pinokio/hf-token'
+        }
+      }
+    },
+    api: {
+      async wait() {
+        return { action: 'open' }
+      }
+    }
+  }
+
+  Util.clipboard = async () => {
+    throw new Error('clipboard denied')
+  }
+  Util.openURI = async (uri) => {
+    opened.push(uri)
+    return { ok: true, status: 'stubbed' }
+  }
+
+  try {
+    const result = await hf.login({
+      parent: { id: 'test-script' },
+      params: { wait: false }
+    }, (stream, type) => packets.push({ type, stream }), kernel)
+
+    assert.deepEqual(opened, [])
+    assert.equal(packets.length, 3)
+    assert.match(packets[0].stream.html, /Clipboard copy failed/)
+    assert.match(packets[0].stream.html, /ABCD-EFGH/)
+    assert.equal(packets[1].stream.action, 'update')
+    assert.equal(packets[2].stream.action, 'close')
+    assert.deepEqual(result, {
+      status: 'pending',
+      login,
+      token_path: '/tmp/pinokio/hf-token',
+      clipboard: { ok: false, error: 'clipboard denied' },
+      open: { action: 'open' }
+    })
+  } finally {
+    Util.openURI = originalOpenURI
+    Util.clipboard = originalClipboard
+  }
+})
+
+test('hf.login cancels the pending provider login when the modal is canceled', async () => {
+  const hf = new HF()
+  const packets = []
+  const cancelCalls = []
+  const originalClipboard = Util.clipboard
+  const kernel = {
+    connect: {
+      async keys(provider) {
+        assert.equal(provider, 'huggingface')
+        return null
+      },
+      async login(provider) {
+        assert.equal(provider, 'huggingface')
+        return {
+          status: 'pending',
+          login,
+          token_path: '/tmp/pinokio/hf-token'
+        }
+      },
+      async cancelLogin(provider, params) {
+        cancelCalls.push({ provider, params })
+      }
+    },
+    api: {
+      async wait() {
+        return { action: 'cancel' }
+      }
+    }
+  }
+
+  Util.clipboard = async () => {}
+
+  try {
+    await assert.rejects(
+      () => hf.login({
+        parent: { id: 'test-script' },
+        params: { force: true }
+      }, (stream, type) => packets.push({ type, stream }), kernel),
+      /Hugging Face login canceled/
+    )
+
+    assert.deepEqual(cancelCalls, [{
+      provider: 'huggingface',
+      params: { force: true }
+    }])
+    assert.equal(packets.at(-1).stream.action, 'close')
+  } finally {
+    Util.clipboard = originalClipboard
+  }
+})
+
+test('hf.login cancels the pending provider login after timeout', async () => {
+  const hf = new HF()
+  const cancelCalls = []
+  const originalClipboard = Util.clipboard
+  const kernel = {
+    connect: {
+      async keys(provider) {
+        assert.equal(provider, 'huggingface')
+        return null
+      },
+      async login(provider) {
+        assert.equal(provider, 'huggingface')
+        return {
+          status: 'pending',
+          login,
+          token_path: '/tmp/pinokio/hf-token'
+        }
+      },
+      async cancelLogin(provider, params) {
+        cancelCalls.push({ provider, params })
+      }
+    },
+    api: {
+      async wait() {
+        return { action: 'open' }
+      }
+    }
+  }
+
+  Util.clipboard = async () => {}
+
+  try {
+    const result = await hf.login({
+      parent: { id: 'test-script' },
+      params: { timeout: 1, interval: 1 }
+    }, () => {}, kernel)
+
+    assert.equal(result.status, 'timeout')
+    assert.deepEqual(cancelCalls, [{
+      provider: 'huggingface',
+      params: { timeout: 1, interval: 1 }
+    }])
+  } finally {
+    Util.clipboard = originalClipboard
+  }
+})
+
+test('hf.logout delegates to the Hugging Face connect provider and returns success', async () => {
+  const hf = new HF()
+  const req = { params: {} }
+  const calls = []
+  const kernel = {
+    connect: {
+      async logout(provider, params) {
+        calls.push({ method: 'logout', provider, params })
+      }
+    }
+  }
+
+  const result = await hf.logout(req, () => {}, kernel)
+
+  assert.deepEqual(result, { status: 'success' })
+  assert.deepEqual(calls, [{ method: 'logout', provider: 'huggingface', params: req.params }])
+})
+
+test('hf.login reports unavailable Hugging Face connect provider', async () => {
+  const hf = new HF()
+
+  await assert.rejects(
+    () => hf.login({ params: {} }, () => {}, {}),
+    /Hugging Face connect keys is not available/
+  )
+})
+
+test('hf.login reports unavailable Hugging Face login starter after checking existing keys', async () => {
+  const hf = new HF()
+  const kernel = {
+    connect: {
+      async keys(provider) {
+        assert.equal(provider, 'huggingface')
+        return null
+      }
+    }
+  }
+
+  await assert.rejects(
+    () => hf.login({ params: {} }, () => {}, kernel),
+    /Hugging Face connect login is not available/
+  )
+})

package/test/huggingface-connect.test.js

@@ -71,3 +71,36 @@ test('Hugging Face connect uses shared HF_TOKEN_PATH and ignores ambient HF_TOKE
     await fs.rm(root, { recursive: true, force: true })
   }
 })
+
+test('Hugging Face connect cancelLogin only stops a pending login session', async () => {
+  const provider = new HuggingfaceConnect(createKernel('/tmp/pinokio'), {})
+  let killed = false
+  provider.loginSession = {
+    status: 'pending',
+    error: null,
+    child: {
+      kill() {
+        killed = true
+      }
+    }
+  }
+
+  await provider.cancelLogin()
+
+  assert.equal(killed, true)
+  assert.equal(provider.loginSession, null)
+
+  const completeSession = {
+    status: 'success',
+    child: {
+      kill() {
+        throw new Error('should not kill completed sessions')
+      }
+    }
+  }
+  provider.loginSession = completeSession
+
+  await provider.cancelLogin()
+
+  assert.equal(provider.loginSession, completeSession)
+})