Upload static/pages/help/help.js with huggingface_hub

static/pages/help/help.js

@@ -1,43 +1,79 @@
 /**
- * Help Page
+ * Help Page — live stats, search, copy buttons, smooth navigation
  */
 
+const API_BASE = window.location.origin;
+
 class HelpPage {
   async init() {
-    console.log('[Help] Initializing...');
     this.setupSearch();
-    this.setupAccordions();
+    this.setupCopyButtons();
+    this.setupToc();
+    await this.loadLiveStats();
     console.log('[Help] Ready');
   }
 
   setupSearch() {
-    const searchInput = document.getElementById('help-search');
-    if (searchInput) {
-      searchInput.addEventListener('input', (e) => {
-        this.filterContent(e.target.value);
+    const input = document.getElementById('help-search');
+    if (!input) return;
+    input.addEventListener('input', (e) => {
+      const q = e.target.value.toLowerCase().trim();
+      document.querySelectorAll('.help-section').forEach((section) => {
+        const text = section.textContent.toLowerCase();
+        section.style.display = !q || text.includes(q) ? '' : 'none';
       });
-    }
+    });
   }
 
-  setupAccordions() {
-    const accordionHeaders = document.querySelectorAll('.accordion-header');
-    accordionHeaders.forEach(header => {
-      header.addEventListener('click', () => {
-        const parent = header.parentElement;
-        parent.classList.toggle('active');
+  setupToc() {
+    document.querySelectorAll('.help-toc a').forEach((link) => {
+      link.addEventListener('click', (e) => {
+        const id = link.getAttribute('href')?.slice(1);
+        const el = id && document.getElementById(id);
+        if (el) {
+          e.preventDefault();
+          el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
       });
     });
   }
 
-  filterContent(query) {
-    const sections = document.querySelectorAll('.help-section');
-    const lowerQuery = query.toLowerCase();
-
-    sections.forEach(section => {
-      const text = section.textContent.toLowerCase();
-      section.style.display = text.includes(lowerQuery) ? 'block' : 'none';
+  setupCopyButtons() {
+    document.querySelectorAll('[data-copy]').forEach((btn) => {
+      btn.addEventListener('click', async () => {
+        const text = btn.getAttribute('data-copy') || btn.closest('.code-wrap')?.querySelector('code')?.textContent;
+        if (!text) return;
+        try {
+          await navigator.clipboard.writeText(text.trim());
+          const label = btn.textContent;
+          btn.textContent = 'Copied!';
+          setTimeout(() => { btn.textContent = label; }, 1500);
+        } catch {
+          btn.textContent = 'Copy failed';
+        }
+      });
     });
   }
+
+  async loadLiveStats() {
+    const el = document.getElementById('live-stats');
+    if (!el) return;
+    try {
+      const res = await fetch(`${API_BASE}/api/dashboard/overview`, { signal: AbortSignal.timeout(15000) });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      const c = data.cards || {};
+      el.innerHTML = `
+        <div class="stat-pill"><strong>${c.total_resources ?? '—'}</strong><span>Registry entries</span></div>
+        <div class="stat-pill"><strong>${c.api_keys_env ?? 0}+${c.api_keys_file ?? 0}</strong><span>API keys (env + file)</span></div>
+        <div class="stat-pill"><strong>${c.models_loaded ?? 0}/${c.models_total ?? 0}</strong><span>Models loaded</span></div>
+        <div class="stat-pill"><strong>${c.pools_healthy ?? 0}/${c.pools_total ?? 0}</strong><span>Healthy pools</span></div>
+        <div class="stat-pill"><strong>${c.providers_online ?? 0}</strong><span>Providers available</span></div>
+      `;
+    } catch (err) {
+      el.innerHTML = `<p class="help-note">Live stats unavailable (${err.message}). Endpoints below still work when the Space is running.</p>`;
+    }
+  }
 }
 
 export default HelpPage;