npm - pinokiod - Versions diffs - 3.41.0 → 3.43.0 - Mend

pinokiod 3.41.0 → 3.43.0

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 (82) hide show

package/kernel/api/browser/index.js +3 -1
package/kernel/api/cloudflare/index.js +3 -3
package/kernel/api/index.js +187 -51
package/kernel/api/loading/index.js +15 -0
package/kernel/api/process/index.js +7 -0
package/kernel/api/shell/index.js +0 -2
package/kernel/bin/browserless.js +22 -0
package/kernel/bin/caddy.js +36 -4
package/kernel/bin/index.js +4 -1
package/kernel/bin/setup.js +38 -5
package/kernel/connect/backend.js +110 -0
package/kernel/connect/config.js +171 -0
package/kernel/connect/index.js +18 -7
package/kernel/connect/providers/huggingface/index.js +98 -0
package/kernel/connect/providers/x/index.js +0 -1
package/kernel/environment.js +91 -19
package/kernel/git.js +46 -3
package/kernel/index.js +119 -39
package/kernel/peer.js +40 -5
package/kernel/plugin.js +3 -2
package/kernel/procs.js +27 -20
package/kernel/prototype.js +30 -16
package/kernel/router/common.js +1 -1
package/kernel/router/connector.js +1 -3
package/kernel/router/index.js +38 -4
package/kernel/router/localhost_home_router.js +5 -1
package/kernel/router/localhost_port_router.js +27 -1
package/kernel/router/localhost_static_router.js +93 -0
package/kernel/router/localhost_variable_router.js +14 -9
package/kernel/router/peer_peer_router.js +3 -0
package/kernel/router/peer_static_router.js +43 -0
package/kernel/router/peer_variable_router.js +15 -14
package/kernel/router/processor.js +26 -1
package/kernel/router/rewriter.js +59 -0
package/kernel/scripts/git/commit +11 -1
package/kernel/shell.js +8 -3
package/kernel/util.js +65 -6
package/package.json +2 -1
package/server/index.js +1037 -964
package/server/public/common.js +382 -1
package/server/public/fscreator.js +0 -1
package/server/public/loading.js +17 -0
package/server/public/notifyinput.js +0 -1
package/server/public/opener.js +4 -2
package/server/public/style.css +311 -11
package/server/socket.js +7 -1
package/server/views/app.ejs +1747 -351
package/server/views/columns.ejs +338 -0
package/server/views/connect/huggingface.ejs +353 -0
package/server/views/connect/index.ejs +410 -0
package/server/views/connect/x.ejs +43 -9
package/server/views/connect.ejs +709 -49
package/server/views/container.ejs +357 -0
package/server/views/d.ejs +251 -62
package/server/views/download.ejs +54 -10
package/server/views/editor.ejs +11 -0
package/server/views/explore.ejs +40 -15
package/server/views/file_explorer.ejs +25 -246
package/server/views/form.ejs +44 -1
package/server/views/frame.ejs +39 -1
package/server/views/github.ejs +48 -11
package/server/views/help.ejs +48 -7
package/server/views/index.ejs +119 -58
package/server/views/index2.ejs +3 -4
package/server/views/init/index.ejs +651 -197
package/server/views/install.ejs +1 -1
package/server/views/mini.ejs +47 -18
package/server/views/net.ejs +199 -67
package/server/views/network.ejs +220 -94
package/server/views/network2.ejs +3 -4
package/server/views/old_network.ejs +3 -3
package/server/views/prototype/index.ejs +48 -11
package/server/views/review.ejs +1005 -0
package/server/views/rows.ejs +341 -0
package/server/views/screenshots.ejs +1020 -0
package/server/views/settings.ejs +160 -23
package/server/views/setup.ejs +49 -7
package/server/views/setup_home.ejs +43 -10
package/server/views/shell.ejs +7 -1
package/server/views/start.ejs +14 -9
package/server/views/terminal.ejs +13 -2
package/server/views/tools.ejs +1015 -0

package/server/views/columns.ejs ADDED Viewed

@@ -0,0 +1,338 @@
+<html>
+<head>
+<style>
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+body.single {
+  display: block;
+}
+body {
+  display: grid;
+  grid-template-columns: var(--col0, 1fr) 6px var(--col1, 1fr);
+  gap: 0px;
+}
+body iframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+}
+/* Splitter (gutter) styles */
+.gutter {
+  background: whitesmoke;
+  cursor: col-resize;
+  position: relative;
+}
+body.dark {
+  background: #1B1C1D;
+}
+body.dark .gutter {
+  background: #111111;
+}
+body.resizing, .gutter:hover {
+  cursor: col-resize;
+}
+body.resizing {
+  user-select: none;
+}
+/* Visible handle */
+.gutter::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 4px;
+  height: 32px;
+  border-radius: 2px;
+  /*
+  background: #bdbdbd;
+  */
+}
+.gutter:hover::before, body.resizing .gutter::before { background: #9e9e9e; }
+.gutter:focus { outline: none; box-shadow: inset 0 0 0 2px #90caf9; }
+</style>
+</head>
+<body class='<%=theme%>'>
+<iframe id='col0' data-src="<%=src%>"></iframe>
+<div id="gutter" class="gutter" tabindex="0" role="separator" aria-orientation="vertical" aria-label="Resize panels" aria-valuemin="120" aria-valuemax="0" aria-valuenow="0"></div>
+<iframe id='col1' data-src="<%=src%>"></iframe>
+<script>
+  (function() {
+    const gutter = document.getElementById('gutter');
+    const left = document.getElementById('col0');
+    const right = document.getElementById('col1');
+    const body = document.body;
+    const GUTTER = gutter ? gutter.getBoundingClientRect().width || 6 : 6;
+    const MIN = 120; // minimum width for each pane in px
+    // Stable instance path for recursive panes
+    // Prefer parent-assigned iframe name; fallback to window.name; else 'root' for top-level
+    const PATH = (window.frameElement && window.frameElement.name) || window.name || 'root';
+    if (!window.name) { try { window.name = PATH; } catch(_) {} }
+    // Assign deterministic names to child panes before loading
+    left.name = `${PATH}.0`;
+    right.name = `${PATH}.1`;
+    const splitKey = `splitRatio:${PATH}`;
+    const KEY_STEP = 20;
+    const KEY_STEP_BIG = 100;
+    const urlKeyFor = (paneName) => `paneUrl:${paneName}`;
+    function setColumns(leftPx) {
+      console.log("setColumns", leftPx)
+      document.body.style.gridTemplateColumns = `${leftPx}px ${GUTTER}px 1fr`;
+    }
+    function computeTotal() {
+      const bodyRect = body.getBoundingClientRect();
+      return bodyRect.width - GUTTER;
+    }
+    function clamp(val, min, max) { return Math.max(min, Math.min(max, val)); }
+    function updateAria(leftPx, total) {
+      if (!gutter) return;
+      gutter.setAttribute('aria-valuemin', String(MIN));
+      gutter.setAttribute('aria-valuemax', String(Math.max(MIN, total - MIN)));
+      gutter.setAttribute('aria-valuenow', String(Math.max(MIN, Math.min(total - MIN, Math.round(leftPx)))));
+    }
+    function saveRatioFromLeftPx(leftPx) {
+      const total = computeTotal();
+      if (total > 0) {
+        const ratio = clamp(leftPx / total, 0, 1);
+        try { sessionStorage.setItem(splitKey, String(ratio)); } catch (_) {}
+      }
+    }
+    function applyFromRatio(ratio) {
+      console.log("applyFromRatio", ratio)
+      const total = computeTotal();
+      let leftPx = clamp(Math.round(total * ratio), MIN, total - MIN);
+      setColumns(leftPx);
+      updateAria(leftPx, total);
+    }
+    // --- Per-window URL persistence for each pane ---
+    function restorePaneURL(pane, key) {
+      try {
+        const saved = sessionStorage.getItem(key);
+        const fallback = pane.getAttribute('data-src') || pane.getAttribute('src') || '';
+        const target = (saved && typeof saved === 'string') ? saved : fallback;
+        if (target && pane.src !== target) pane.src = target;
+      } catch (_) { /* ignore */ }
+    }
+    function attachSameOriginRouteHooks(pane, key) {
+      try {
+        const cw = pane.contentWindow;
+        if (!cw) return;
+        const notify = () => {
+          try { sessionStorage.setItem(key, cw.location.href); } catch (_) {}
+        };
+        // Hook SPA navigations
+        const _ps = cw.history.pushState;
+        cw.history.pushState = function() { const r = _ps.apply(this, arguments); notify(); return r; };
+        const _rs = cw.history.replaceState;
+        cw.history.replaceState = function() { const r = _rs.apply(this, arguments); notify(); return r; };
+        cw.addEventListener('popstate', notify);
+        cw.addEventListener('hashchange', notify);
+        if (cw.document?.readyState === 'loading') cw.document.addEventListener('DOMContentLoaded', notify, { once: true });
+        else notify();
+      } catch (err) {
+        // Cross-origin: fall back to saving src only
+        try { sessionStorage.setItem(key, pane.src); } catch (_) {}
+      }
+    }
+    function onPaneLoadFactory(pane, key) {
+      return function onPaneLoad() {
+        // Try to attach same-origin hooks and save current URL; if cross-origin, save src
+        attachSameOriginRouteHooks(pane, key);
+      };
+    }
+    // Overlay to avoid iframe stealing events in Chrome
+    function createOverlay() {
+      const el = document.createElement('div');
+      el.style.position = 'fixed';
+      el.style.inset = '0';
+      el.style.cursor = 'col-resize';
+      el.style.zIndex = '2147483647';
+      el.style.background = 'transparent';
+      return el;
+    }
+    let startX = 0;
+    let startLeft = 0;
+    let total = 0;
+    let overlay = null;
+    function refreshLayout (splitKey) {
+      let val = sessionStorage.getItem(splitKey)
+      let id = splitKey.replace("splitRatio:", "")
+      if (val === "1" || val === "0") {
+        if (val === "1") {
+          id_to_hide = id + ".1"
+        } else if (val === "0") {
+          id_to_hide = id + ".0"
+        }
+        const el = document.querySelector(`iframe[name='${id_to_hide}']`)
+        el.remove()
+        document.body.className = "single"
+        document.querySelector("#gutter").remove()
+      }
+    }
+    function onPointerMove(e) {
+      const delta = e.clientX - startX;
+      let newLeft = startLeft + delta;
+      newLeft = Math.max(MIN, Math.min(total - MIN, newLeft));
+      setColumns(newLeft);
+      updateAria(newLeft, total);
+    }
+    function endDrag(e) {
+      if (gutter && e && e.pointerId != null && gutter.hasPointerCapture?.(e.pointerId)) {
+        try { gutter.releasePointerCapture(e.pointerId); } catch (_) {}
+      }
+      window.removeEventListener('pointermove', onPointerMove, true);
+      window.removeEventListener('pointerup', endDrag, true);
+      window.removeEventListener('pointercancel', endDrag, true);
+      if (overlay) {
+        overlay.remove();
+        overlay = null;
+      }
+      body.classList.remove('resizing');
+      // Persist position as ratio
+      try {
+        const leftRect = left.getBoundingClientRect();
+        saveRatioFromLeftPx(leftRect.width);
+      } catch (_) {}
+    }
+    // Restore child pane URLs before any interaction (override hardcoded src)
+    restorePaneURL(left, urlKeyFor(left.name));
+    restorePaneURL(right, urlKeyFor(right.name));
+    // Track navigations for each pane
+    left.addEventListener('load', onPaneLoadFactory(left, urlKeyFor(left.name)));
+    right.addEventListener('load', onPaneLoadFactory(right, urlKeyFor(right.name)));
+    if (gutter) {
+      gutter.addEventListener('pointerdown', (e) => {
+        e.preventDefault();
+        const bodyRect = body.getBoundingClientRect();
+        const leftRect = left.getBoundingClientRect();
+        total = bodyRect.width - GUTTER; // total available for both iframes
+        startLeft = leftRect.width;
+        startX = e.clientX;
+        // Ensure we keep receiving events even over iframes
+        try { gutter.setPointerCapture(e.pointerId); } catch (_) {}
+        overlay = createOverlay();
+        document.body.appendChild(overlay);
+        window.addEventListener('pointermove', onPointerMove, true);
+        window.addEventListener('pointerup', endDrag, true);
+        window.addEventListener('pointercancel', endDrag, true);
+        body.classList.add('resizing');
+      });
+      // Keyboard resizing for accessibility
+      gutter.addEventListener('keydown', (e) => {
+        const { key } = e;
+        if (key !== 'ArrowLeft' && key !== 'ArrowRight' && key !== 'Home' && key !== 'End') return;
+        e.preventDefault();
+        const totalNow = computeTotal();
+        const rect = left.getBoundingClientRect();
+        const step = e.shiftKey ? KEY_STEP_BIG : KEY_STEP;
+        let leftPx = rect.width;
+        if (key === 'ArrowLeft') leftPx -= step;
+        else if (key === 'ArrowRight') leftPx += step;
+        else if (key === 'Home') leftPx = MIN;
+        else if (key === 'End') leftPx = totalNow - MIN;
+        leftPx = clamp(leftPx, MIN, totalNow - MIN);
+        setColumns(leftPx);
+        updateAria(leftPx, totalNow);
+        saveRatioFromLeftPx(leftPx);
+      });
+    }
+    // Initialize from saved ratio if available and set ARIA
+    try {
+      const saved = parseFloat(sessionStorage.getItem(splitKey) || '');
+      console.log({ saved })
+      if (!Number.isNaN(saved) && saved > 0 && saved < 1) {
+        console.log("> 1")
+        applyFromRatio(saved);
+      } else {
+        console.log("> 2")
+        updateAria(left.getBoundingClientRect().width, computeTotal());
+        refreshLayout(splitKey)
+      }
+    } catch (_) {
+      console.log("> 3")
+      updateAria(left.getBoundingClientRect().width, computeTotal());
+    }
+    // Re-apply on window resize to keep ratio
+    window.addEventListener('resize', () => {
+      try {
+        const saved = parseFloat(sessionStorage.getItem(splitKey) || '');
+        if (!Number.isNaN(saved) && saved > 0 && saved < 1) {
+          applyFromRatio(saved);
+        } else {
+          updateAria(left.getBoundingClientRect().width, computeTotal());
+        }
+      } catch (_) {
+        updateAria(left.getBoundingClientRect().width, computeTotal());
+      }
+    });
+    window.addEventListener('message', (event) => {
+      if (event.data && event.data.e === "close") {
+        // find the frame
+        // Find which iframe sent the message
+        const col0 = document.getElementById('col0');
+        const col1 = document.getElementById('col1');
+        let sourceFrameId = null;
+        if (event.source === col0.contentWindow) {
+          sourceFrameId = 'col0';
+        } else if (event.source === col1.contentWindow) {
+          sourceFrameId = 'col1';
+        }
+        console.log('Message received from iframe:', sourceFrameId);
+        // Or use this approach to loop through all iframes
+        const iframes = document.querySelectorAll('iframe');
+        console.log({ splitKey })
+        for (let iframe of iframes) {
+          if (event.source === iframe.contentWindow) {
+//            const splitKey = `splitRatio:${iframe.name}`
+//            console.log({ splitKey })
+            if (iframe.id === "col0") {
+              // hide col0 => ratio: 0
+//              col0.src = "about:blank"
+//              col0.style.display = "none"
+              try { sessionStorage.setItem(splitKey, "0"); } catch (_) {}
+              refreshLayout(splitKey)
+            } else if (iframe.id === "col1") {
+              // hide col1 => ratio: 1
+//              col1.src = "about:blank"
+//              col1.style.display = "none"
+              try { sessionStorage.setItem(splitKey, "1"); } catch (_) { console.log("<<< ", _ )}
+              refreshLayout(splitKey)
+            }
+            break;
+          }
+        }
+      }
+    })
+  })();
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,353 @@
+<!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;
+            max-width: 600px;
+            margin: 50px auto;
+            padding: 20px;
+            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>
+</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>
+            </div>
+        </div>
+    </div>
+    <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';
+        // Utility functions
+        function setStatus(message, type) {
+            const status = document.getElementById('status');
+            status.textContent = message;
+            status.className = `status ${type}`;
+        }
+        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;
+        }
+        // PKCE functions
+        function generateCodeVerifier() {
+            const array = new Uint8Array(32);
+            crypto.getRandomValues(array);
+            return base64URLEncode(array);
+        }
+        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 base64URLEncode(array) {
+            return btoa(String.fromCharCode.apply(null, array))
+                .replace(/\+/g, '-')
+                .replace(/\//g, '_')
+                .replace(/=/g, '');
+        }
+        // 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
+          }
+        }
+        // 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');
+            }
+        }
+        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) {
+                    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 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();
+            }
+        }
+        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 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
+        }
+        // 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
+                }
+            });
+        }
+        // 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');
+            }
+        });
+        // Export makeAuthenticatedRequest for external use
+        window.makeAuthenticatedRequest = makeAuthenticatedRequest;
+        window.ensureValidToken = ensureValidToken;
+    </script>
+</body>
+</html>