npm - pinokiod - Versions diffs - 7.3.10 → 7.3.12 - Mend

pinokiod 7.3.10 → 7.3.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/kernel/bin/brew.js +12 -2
package/kernel/bin/caddy.js +24 -20
package/kernel/bin/huggingface.js +2 -2
package/kernel/bin/setup.js +2 -3
package/kernel/bin/uv.js +13 -6
package/kernel/connect/index.js +5 -1
package/kernel/connect/providers/huggingface/index.js +213 -75
package/kernel/environment.js +16 -1
package/kernel/router/localhost_home_router.js +7 -0
package/kernel/shell.js +1 -5
package/kernel/util.js +1 -0
package/package.json +1 -1
package/server/index.js +75 -33
package/server/public/common.js +45 -71
package/server/public/install.js +20 -2
package/server/public/layout.js +1 -1
package/server/public/style.css +1432 -511
package/server/public/tab-link-popover.css +162 -18
package/server/public/tab-link-popover.js +230 -21
package/server/public/task-launcher.css +121 -84
package/server/public/terminal-settings.js +121 -45
package/server/public/universal-launcher.css +42 -33
package/server/public/urldropdown.css +284 -0
package/server/views/app.ejs +1608 -321
package/server/views/autolaunch.ejs +4 -5
package/server/views/checkpoints.ejs +223 -50
package/server/views/connect/huggingface.ejs +406 -325
package/server/views/connect.ejs +0 -1
package/server/views/github.ejs +277 -324
package/server/views/index.ejs +53 -1
package/server/views/install.ejs +119 -19
package/server/views/logs.ejs +10 -9
package/server/views/net.ejs +341 -64
package/server/views/network.ejs +85 -63
package/server/views/partials/main_sidebar.ejs +237 -12
package/server/views/plugins.ejs +141 -3
package/server/views/settings.ejs +103 -7
package/server/views/setup.ejs +0 -5
package/server/views/skills.ejs +0 -1
package/server/views/task_list.ejs +0 -1
package/server/views/terminal.ejs +142 -1
package/server/views/terminals.ejs +346 -6
package/server/views/tools.ejs +828 -1691
package/test/caddy-install.test.js +53 -0
package/test/connect-setup.test.js +16 -0
package/test/github-connection.test.js +1 -1
package/test/huggingface-bin.test.js +4 -4
package/test/huggingface-connect.test.js +73 -0
package/test/main-sidebar.test.js +31 -0
package/test/shell-run-template.test.js +5 -1
package/test/uv-bin.test.js +29 -0

package/server/views/connect/huggingface.ejs CHANGED Viewed

@@ -1,350 +1,431 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Minimal Hugging Face OAuth</title>
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: #f8fafc;
-        }
-        .container {
-            background: white;
-            padding: 30px;
-            border-radius: 10px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        }
-        h1 {
-            color: #1f2937;
-            margin-bottom: 20px;
-        }
-        .btn {
-            background: #ff6b35;
-            color: white;
-            border: none;
-            padding: 12px 24px;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 16px;
-            margin: 10px 5px 10px 0;
-        }
-        .btn:hover {
-            background: #e55a2b;
-        }
-        .btn.secondary {
-            background: #6b7280;
-        }
-        .btn.secondary:hover {
-            background: #4b5563;
-        }
-        .user-info {
-            background: #f0f9ff;
-            padding: 15px;
-            border-radius: 6px;
-            border-left: 4px solid #3b82f6;
-            margin-top: 20px;
-        }
-        .status {
-            padding: 12px;
-            margin: 10px 0;
-            border-radius: 6px;
-            font-weight: 500;
-        }
-        .status.success { background: #d1fae5; color: #065f46; }
-        .status.error { background: #fee2e2; color: #991b1b; }
-        .status.warning { background: #fef3c7; color: #92400e; }
-        .hidden { display: none; }
-    </style>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Hugging Face Login</title>
+  <link href="/css/fontawesome.min.css" rel="stylesheet">
+  <link href="/css/solid.min.css" rel="stylesheet">
+  <link href="/css/regular.min.css" rel="stylesheet">
+  <link href="/css/brands.min.css" rel="stylesheet">
+  <link href="/noty.css" rel="stylesheet">
+  <link href="/style.css" rel="stylesheet">
+  <link href="/task-launcher.css" rel="stylesheet">
+  <% if (agent === "electron") { %>
+    <link href="/electron.css" rel="stylesheet"/>
+  <% } %>
+  <style>
+    .hf-login-shell {
+      max-width: 980px;
+    }
+    .hf-state-panel {
+      display: flex;
+      align-items: flex-start;
+      gap: 14px;
+    }
+    .hf-state-icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      background: var(--task-chip-bg, var(--task-soft));
+      border: 1px solid var(--task-border);
+      color: var(--task-text);
+    }
+    .hf-state-copy {
+      min-width: 0;
+    }
+    .hf-state-title {
+      margin: 0;
+      color: var(--task-text);
+      font-size: 18px;
+      font-weight: 800;
+      line-height: 1.25;
+      letter-spacing: 0;
+    }
+    .hf-state-detail {
+      margin: 8px 0 0;
+      color: var(--task-muted);
+      font-size: 14px;
+      line-height: 1.55;
+    }
+    .hf-action-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 20px;
+    }
+    .hf-code-panel {
+      display: grid;
+      gap: 10px;
+      max-width: 520px;
+      margin-top: 18px;
+      padding: 14px;
+      border: 1px solid var(--task-border);
+      border-radius: 8px;
+      background: var(--task-panel);
+    }
+    .hf-code-panel.hidden {
+      display: none;
+    }
+    .hf-code-label {
+      margin: 0;
+      color: var(--task-muted);
+      font-size: 13px;
+      line-height: 1.45;
+    }
+    .hf-code-row {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 10px;
+    }
+    .hf-code-value {
+      display: inline-flex;
+      align-items: center;
+      padding: 9px 11px;
+      border: 1px solid var(--task-border);
+      border-radius: 6px;
+      color: var(--task-text);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+      font-size: 15px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+    }
+    .hf-error {
+      margin-top: 16px;
+    }
+  </style>
 </head>
-<body>
-    <div class="container">
-        <h1>🤗 Hugging Face OAuth</h1>
-        <div id="status" class="status warning">
-            Checking authentication status...
-        </div>
-        <!-- Login Section -->
-        <div id="login-section">
-            <p>Click below to authenticate with Hugging Face:</p>
-            <button class="btn" onclick="login()">Login with Hugging Face</button>
-        </div>
-        <!-- User Section -->
-        <div id="user-section" class="hidden">
-            <div class="user-info">
-                <h3>Welcome!</h3>
-                <div id="user-details"></div>
-                <button class="btn secondary" onclick="logout()">Logout</button>
+<%
+  const selected = "connect";
+%>
+<body class="<%= theme %> main-sidebar-page task-launcher-page task-page setup-page" data-agent="<%= agent %>" data-page="huggingface-connect">
+  <%- include('../partials/app_navheader', { agent }) %>
+  <main>
+    <div class="task-container">
+      <section class="task-shell hf-login-shell">
+        <header class="task-shell-header">
+          <div class="task-shell-header-main">
+            <div class="task-shell-topline">
+              <p class="task-eyebrow">Login / Hugging Face</p>
+            </div>
+            <h1 class="task-title">Authorize Hugging Face</h1>
+            <p class="task-description">Copy the device code, open Hugging Face, then approve the login. Pinokio will continue when the token is saved.</p>
+            <div class="task-badge-row task-header-badges">
+              <span class="task-badge task-badge-accent" id="hf-badge">Starting</span>
+              <span class="task-badge task-badge-neutral">Managed by huggingface_hub</span>
             </div>
+          </div>
+        </header>
+        <div class="task-shell-body">
+          <section class="task-section task-section-subtle">
+            <div class="hf-state-panel">
+              <div class="hf-state-icon" aria-hidden="true">
+                <i class="fa-solid fa-circle-notch fa-spin" id="hf-icon"></i>
+              </div>
+              <div class="hf-state-copy">
+                <h2 class="hf-state-title" id="hf-title">Checking Hugging Face login</h2>
+                <p class="hf-state-detail" id="hf-detail">Pinokio is checking whether a Hugging Face token is already saved.</p>
+                <div class="hf-action-row">
+                  <button class="task-button primary hidden" id="hf-login" type="button">
+                    <i class="fa-solid fa-key" aria-hidden="true"></i>
+                    <span>Log In</span>
+                  </button>
+                  <a class="task-button hidden" id="hf-done" href="/connect">
+                    <i class="fa-solid fa-check" aria-hidden="true"></i>
+                    <span>Done</span>
+                  </a>
+                  <button class="task-button danger hidden" id="hf-logout" type="button">
+                    <i class="fa-solid fa-circle-xmark" aria-hidden="true"></i>
+                    <span>Logout</span>
+                  </button>
+                </div>
+                <div class="hf-code-panel hidden" id="hf-code">
+                  <p class="hf-code-label">Hugging Face is asking for this device code.</p>
+                  <div class="hf-code-row">
+                    <div class="hf-code-value" id="hf-code-value"></div>
+                    <button class="task-button primary" id="hf-open" type="button">
+                      <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
+                      <span>Copy and Open Hugging Face</span>
+                    </button>
+                  </div>
+                </div>
+                <div class="task-status error hidden hf-error" id="hf-error"></div>
+              </div>
+            </div>
+          </section>
         </div>
+      </section>
     </div>
+    <%- include('../partials/main_sidebar', { selected }) %>
+  </main>
-    <script>
-        // Configuration
-        const CLIENT_ID = 'e90d4a4d-68a6-4c12-ae71-64756b5918de';
-        const REDIRECT_URI = 'https://pinokio.localhost/connect/huggingface';
-        const HF_OAUTH_URL = 'https://huggingface.co/oauth/authorize';
-        const HF_TOKEN_URL = 'https://huggingface.co/oauth/token';
-        const HF_API_URL = 'https://huggingface.co/api/whoami-v2';
+  <script>
+    const LOGIN_URL = "/connect/huggingface/login"
+    const LOGOUT_URL = "/connect/huggingface/logout"
+    const KEYS_URL = "/connect/huggingface/keys"
+    const PROFILE_URL = "/connect/huggingface/profile"
+    const POLL_INTERVAL = 2000
+    const POLL_TIMEOUT = 120000
-        // Utility functions
-        function setStatus(message, type) {
-            const status = document.getElementById('status');
-            status.textContent = message;
-            status.className = `status ${type}`;
-        }
+    const badgeElement = document.getElementById("hf-badge")
+    const iconElement = document.getElementById("hf-icon")
+    const titleElement = document.getElementById("hf-title")
+    const detailElement = document.getElementById("hf-detail")
+    const openButton = document.getElementById("hf-open")
+    const loginButton = document.getElementById("hf-login")
+    const doneLink = document.getElementById("hf-done")
+    const logoutButton = document.getElementById("hf-logout")
+    const codeElement = document.getElementById("hf-code")
+    const codeValueElement = document.getElementById("hf-code-value")
+    const errorElement = document.getElementById("hf-error")
-        function generateRandomString(length) {
-            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-            let result = '';
-            for (let i = 0; i < length; i++) {
-                result += chars.charAt(Math.floor(Math.random() * chars.length));
-            }
-            return result;
-        }
+    let loginUrl = null
+    let pollTimer = null
+    let timeoutTimer = null
-        // PKCE functions
-        function generateCodeVerifier() {
-            const array = new Uint8Array(32);
-            crypto.getRandomValues(array);
-            return base64URLEncode(array);
-        }
+    function setState({ badge, icon, title, detail, done = false }) {
+      if (badge) badgeElement.textContent = badge
+      if (icon) iconElement.className = icon
+      if (title) titleElement.textContent = title
+      if (detail) detailElement.textContent = detail
+      doneLink.classList.toggle("hidden", !done)
+    }
-        async function generateCodeChallenge(verifier) {
-            const encoder = new TextEncoder();
-            const data = encoder.encode(verifier);
-            const digest = await crypto.subtle.digest('SHA-256', data);
-            return base64URLEncode(new Uint8Array(digest));
-        }
+    function setLoginLabel(label) {
+      const labelElement = loginButton.querySelector("span")
+      if (labelElement) labelElement.textContent = label
+    }
-        function base64URLEncode(array) {
-            return btoa(String.fromCharCode.apply(null, array))
-                .replace(/\+/g, '-')
-                .replace(/\//g, '_')
-                .replace(/=/g, '');
-        }
+    function showError(message, options = {}) {
+      const allowLogin = options.allowLogin !== false
+      errorElement.textContent = message
+      errorElement.classList.remove("hidden")
+      setLoginLabel("Try Again")
+      loginButton.classList.toggle("hidden", !allowLogin)
+      logoutButton.classList.add("hidden")
+      setState({
+        badge: "Needs attention",
+        icon: "fa-solid fa-triangle-exclamation",
+        title: "Login needs attention",
+        detail: "Pinokio could not complete the Hugging Face browser login."
+      })
+    }
-        // Token management with automatic refresh
-        async function ensureValidToken() {
-          const res = await fetch('/connect/huggingface/keys', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({})
-          });
-          const json = await res.json();
-          console.log({ json })
-          if (json.error) {
-            return null
-          } else if (json.access_token) {
-            return json.access_token
-          } else {
-            return null
-          }
-        }
+    function clearError() {
+      errorElement.textContent = ""
+      errorElement.classList.add("hidden")
+      loginButton.classList.add("hidden")
+    }
-        // OAuth functions
-        async function login() {
-            try {
-                // Clear existing data
-                localStorage.removeItem('oauth_state');
-                localStorage.removeItem('code_verifier');
-                // Generate PKCE parameters
-                const state = generateRandomString(32);
-                const codeVerifier = generateCodeVerifier();
-                const codeChallenge = await generateCodeChallenge(codeVerifier);
-                // Store for later
-                localStorage.setItem('oauth_state', state);
-                localStorage.setItem('code_verifier', codeVerifier);
-                // Build auth URL
-                const params = new URLSearchParams({
-                    client_id: CLIENT_ID,
-                    redirect_uri: REDIRECT_URI,
-                    response_type: 'code',
-                    scope: 'openid profile email read-repos write-repos manage-repos',
-                    state: state,
-                    code_challenge: codeChallenge,
-                    code_challenge_method: 'S256'
-                });
-                const authUrl = HF_OAUTH_URL + '?' + params.toString();
-                // Redirect
-                window.location.href = authUrl;
-            } catch (error) {
-                console.error('Login error:', error);
-                setStatus('Failed to start login', 'error');
-            }
-        }
+    function stopPolling() {
+      if (pollTimer) {
+        clearInterval(pollTimer)
+        pollTimer = null
+      }
+      if (timeoutTimer) {
+        clearTimeout(timeoutTimer)
+        timeoutTimer = null
+      }
+    }
-        async function handleOAuthCallback(code) {
-            try {
-                // Verify state
-                const urlParams = new URLSearchParams(window.location.search);
-                const returnedState = urlParams.get('state');
-                const storedState = localStorage.getItem('oauth_state');
-                if (returnedState !== storedState) {
-                    throw new Error('Invalid state parameter');
-                }
-                // Get code verifier
-                const codeVerifier = localStorage.getItem('code_verifier');
-                if (!codeVerifier) {
-                    throw new Error('Code verifier not found');
-                }
-                // Exchange code for tokens
-                const response = await fetch(HF_TOKEN_URL, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/x-www-form-urlencoded',
-                    },
-                    body: new URLSearchParams({
-                        client_id: CLIENT_ID,
-                        code: code,
-                        redirect_uri: REDIRECT_URI,
-                        grant_type: 'authorization_code',
-                        code_verifier: codeVerifier
-                    })
-                });
-                if (!response.ok) {
-                    const errorText = await response.text();
-                    throw new Error(`Token exchange failed: ${response.status} - ${errorText}`);
-                }
-                const tokenData = await response.json();
-                console.log('Token response:', tokenData);
-                // Store tokens
-                if (tokenData.access_token) {
+    function showLoggedOut(options = {}) {
+      stopPolling()
+      clearError()
+      loginUrl = null
+      codeElement.classList.add("hidden")
+      codeValueElement.textContent = ""
+      logoutButton.classList.add("hidden")
+      setLoginLabel(options.loginLabel || "Log In")
+      loginButton.classList.remove("hidden")
+      setState({
+        badge: options.badge || "Not connected",
+        icon: options.icon || "fa-regular fa-circle",
+        title: options.title || "Hugging Face not connected",
+        detail: options.detail || "Log in when you need Hugging Face access for gated models or private repositories.",
+        done: Boolean(options.done)
+      })
+    }
-                    const res = await fetch('/connect/huggingface/login', {
-                      method: 'POST',
-                      headers: { 'Content-Type': 'application/json' },
-                      body: JSON.stringify(tokenData)
-                    });
-                    const response = await res.json();
-                    // Cleanup
-                    localStorage.removeItem('oauth_state');
-                    localStorage.removeItem('code_verifier');
-                    window.history.replaceState({}, document.title, window.location.pathname);
-                    // Get user info
-                    await fetchUserInfo();
-                } else {
-                    throw new Error('No access token received');
-                }
-            } catch (error) {
-                console.error('OAuth callback error:', error);
-                setStatus('Authentication failed: ' + error.message, 'error');
-            }
-        }
+    async function postJSON(url, body = {}) {
+      const res = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body)
+      })
+      return res.json()
+    }
-        async function fetchUserInfo() {
-            try {
-                // Use ensureValidToken to automatically refresh if needed
-                const token = await ensureValidToken();
-                if (!token) {
-                    throw new Error('No valid token available');
-                }
-                const response = await fetch(HF_API_URL, {
-                    headers: { 'Authorization': 'Bearer ' + token }
-                });
-                if (!response.ok) {
-                    throw new Error(`API call failed: ${response.status}`);
-                }
-                const userInfo = await response.json();
-                displayUserInfo(userInfo);
-            } catch (error) {
-                console.error('Error fetching user info:', error);
-                setStatus('Failed to fetch user info: ' + error.message, 'error');
-                logout();
-            }
-        }
+    async function readToken() {
+      const json = await postJSON(KEYS_URL)
+      return json && json.access_token && !json.error ? json.access_token : null
+    }
-        function displayUserInfo(userInfo) {
-            const userDetails = document.getElementById('user-details');
-            userDetails.innerHTML = `
-                <p><strong>Username:</strong> ${userInfo.name || 'N/A'}</p>
-                <p><strong>Full Name:</strong> ${userInfo.fullname || 'N/A'}</p>
-                <p><strong>Email:</strong> ${userInfo.email || 'N/A'}</p>
-                <p><strong>Avatar:</strong> <img src="${userInfo.avatarUrl || ''}" alt="Avatar" style="width: 40px; height: 40px; border-radius: 50%; vertical-align: middle;"></p>
-            `;
-            document.getElementById('login-section').className = 'hidden';
-            document.getElementById('user-section').className = '';
-            setStatus(`Logged in as ${userInfo.name}`, 'success');
-        }
+    async function showConnected() {
+      stopPolling()
+      clearError()
+      codeElement.classList.add("hidden")
+      loginButton.classList.add("hidden")
+      logoutButton.classList.remove("hidden")
+      try {
+        const res = await fetch(PROFILE_URL)
+        const profile = await res.json()
+        const nameRow = profile && Array.isArray(profile.items) ? profile.items.find((item) => item.key === "username") : null
+        const username = nameRow && nameRow.val ? ` as ${nameRow.val}` : ""
+        setState({
+          badge: "Connected",
+          icon: "fa-solid fa-circle-check",
+          title: "Hugging Face connected",
+          detail: `Pinokio is signed in${username}.`,
+          done: true
+        })
+      } catch (_) {
+        setState({
+          badge: "Connected",
+          icon: "fa-solid fa-circle-check",
+          title: "Hugging Face connected",
+          detail: "Pinokio is signed in.",
+          done: true
+        })
+      }
+    }
-        async function logout() {
-            document.getElementById('login-section').className = '';
-            document.getElementById('user-section').className = 'hidden';
-            setStatus('Logged out', 'warning');
-            const res = await fetch('/connect/huggingface/logout', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({})
-            });
-            const json = await res.json();
-            location.href = location.href
+    async function logout() {
+      stopPolling()
+      clearError()
+      logoutButton.disabled = true
+      logoutButton.classList.add("is-busy")
+      try {
+        const response = await postJSON(LOGOUT_URL)
+        if (response.error) {
+          throw new Error(response.error)
         }
+        loginUrl = null
+        codeElement.classList.add("hidden")
+        codeValueElement.textContent = ""
+        showLoggedOut({
+          badge: "Signed out",
+          icon: "fa-solid fa-circle-xmark",
+          title: "Hugging Face signed out",
+          detail: "Pinokio removed the saved Hugging Face token.",
+          done: true,
+          loginLabel: "Log In Again"
+        })
+      } catch (error) {
+        showError(error.message, { allowLogin: false })
+        logoutButton.classList.remove("hidden")
+      } finally {
+        logoutButton.disabled = false
+        logoutButton.classList.remove("is-busy")
+      }
+    }
-        // Utility function for making authenticated API calls with automatic refresh
-        async function makeAuthenticatedRequest(url, options = {}) {
-            const token = await ensureValidToken();
-            if (!token) {
-                throw new Error('No valid token available');
-            }
-            return fetch(url, {
-                ...options,
-                headers: {
-                    ...options.headers,
-                    'Authorization': 'Bearer ' + token
-                }
-            });
-        }
+    async function pollLoginStatus() {
+      const token = await readToken()
+      if (token) {
+        await showConnected()
+      }
+    }
+    function startPolling() {
+      stopPolling()
+      pollLoginStatus()
+      pollTimer = setInterval(pollLoginStatus, POLL_INTERVAL)
+      timeoutTimer = setTimeout(() => {
+        stopPolling()
+        setLoginLabel("Try Again")
+        loginButton.classList.remove("hidden")
+        setState({
+          badge: "Still waiting",
+          icon: "fa-regular fa-clock",
+          title: "Still waiting for Hugging Face",
+          detail: "The browser login did not finish in time."
+        })
+      }, POLL_TIMEOUT)
+    }
+    async function copyAndOpen() {
+      if (!loginUrl) return
+      const value = codeValueElement.textContent.trim()
+      if (value) {
+        try {
+          await navigator.clipboard.writeText(value)
+        } catch (_) {}
+      }
+      await fetch("/pinokio/open", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url: loginUrl, surface: "browser" })
+      }).catch(() => {})
+      openButton.querySelector("span").textContent = "Copied and Opened"
+      setTimeout(() => {
+        openButton.querySelector("span").textContent = "Copy and Open Hugging Face"
+      }, 1500)
+    }
+    async function startLogin() {
+      stopPolling()
+      clearError()
+      loginUrl = null
+      doneLink.classList.add("hidden")
+      logoutButton.classList.add("hidden")
+      loginButton.classList.add("hidden")
+      setLoginLabel("Try Again")
+      codeElement.classList.add("hidden")
+      codeValueElement.textContent = ""
+      setState({
+        badge: "Preparing",
+        icon: "fa-solid fa-circle-notch fa-spin",
+        title: "Preparing Hugging Face",
+        detail: "Pinokio is requesting a Hugging Face device code."
+      })
-        // Initialize on page load
-        window.addEventListener('load', async () => {
-            const urlParams = new URLSearchParams(window.location.search);
-            const code = urlParams.get('code');
-            const error = urlParams.get('error');
-            if (error) {
-                setStatus('OAuth error: ' + error, 'error');
-                return;
-            }
-            if (code) {
-                await handleOAuthCallback(code);
-                return;
-            }
-            // Check existing session with automatic refresh
-            const token = await ensureValidToken();
-            if (token) {
-                await fetchUserInfo();
-            } else {
-                setStatus('Not authenticated', 'warning');
-            }
-        });
+      const response = await postJSON(LOGIN_URL)
+      if (response.error || response.status === "error") {
+        showError(response.error || "Unknown Hugging Face login error.")
+        return
+      }
+      if (!response.login || !response.login.verification_uri_complete) {
+        showError("Hugging Face did not return a browser login URL.")
+        return
+      }
-        // Export makeAuthenticatedRequest for external use
-        window.makeAuthenticatedRequest = makeAuthenticatedRequest;
-        window.ensureValidToken = ensureValidToken;
-    </script>
+      loginUrl = response.login.verification_uri_complete
+      if (response.login.user_code) {
+        codeValueElement.textContent = response.login.user_code
+        codeElement.classList.remove("hidden")
+      }
+      setState({
+        badge: "Waiting",
+        icon: "fa-solid fa-circle-notch fa-spin",
+        title: "Authorize Hugging Face",
+        detail: "Use the button to copy the code and open Hugging Face. Keep this page open while Pinokio waits."
+      })
+      startPolling()
+    }
+    openButton.addEventListener("click", copyAndOpen)
+    loginButton.addEventListener("click", startLogin)
+    logoutButton.addEventListener("click", logout)
+    window.addEventListener("load", async () => {
+      try {
+        const token = await readToken()
+        if (token) {
+          await showConnected()
+          return
+        }
+        showLoggedOut()
+      } catch (error) {
+        showError(error.message)
+      }
+    })
+  </script>
+  <%- include('../partials/app_common_scripts') %>
 </body>
 </html>