Upload static/shared/js/page-functionality-bridge.js with huggingface_hub

static/shared/js/page-functionality-bridge.js

@@ -14,12 +14,27 @@
     help: '/api/max/help'
   };
 
+  function panel() {
+    return window.TopServicePanel;
+  }
+
+  function refreshSummary() {
+    const tsp = panel();
+    if (!tsp) return;
+    const parts = window._topServiceSummary || {};
+    tsp.setSummary(tsp.buildSummary([
+      `Page: ${tsp.pageId()}`,
+      parts.bridge,
+      parts.native
+    ]));
+  }
+
   function css() {
     if (document.getElementById('max-provider-bridge-style')) return;
     const style = document.createElement('style');
     style.id = 'max-provider-bridge-style';
     style.textContent = `
-      .max-provider-bridge{margin:16px auto;padding:16px;border:1px solid rgba(148,163,184,.28);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(240,249,255,.75));box-shadow:0 18px 45px rgba(15,23,42,.10);backdrop-filter:blur(14px);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;max-width:1180px;color:#0f172a;}
+      .max-provider-bridge{padding:16px;border:1px solid rgba(148,163,184,.28);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(240,249,255,.75));backdrop-filter:blur(14px);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#0f172a;}
       .max-provider-bridge__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
       .max-provider-bridge__title{font-size:14px;font-weight:800;letter-spacing:.02em;display:flex;align-items:center;gap:8px;}
       .max-provider-bridge__subtitle{font-size:11px;color:#64748b;margin-top:2px;}
@@ -34,7 +49,7 @@
       .max-provider-bridge__links a{font-size:11px;font-weight:700;text-decoration:none;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:5px 9px;}
       .max-provider-bridge__warn{font-size:11px;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:8px 10px;margin-top:10px;}
       @keyframes maxProviderPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.48;transform:scale(.82)}}
-      @media(max-width:900px){.max-provider-bridge__grid{grid-template-columns:repeat(2,minmax(0,1fr));}.max-provider-bridge{margin:12px;padding:12px}}
+      @media(max-width:900px){.max-provider-bridge__grid{grid-template-columns:repeat(2,minmax(0,1fr));}.max-provider-bridge{padding:12px}}
       @media(max-width:540px){.max-provider-bridge__grid{grid-template-columns:1fr}}
     `;
     document.head.appendChild(style);
@@ -44,7 +59,7 @@
     const controller = new AbortController();
     const timer = setTimeout(() => controller.abort(), 12000);
     try {
-      const res = await fetch(url, { signal: controller.signal, headers: { 'Accept': 'application/json' } });
+      const res = await fetch(url, { signal: controller.signal, headers: { Accept: 'application/json' } });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       return await res.json();
     } finally {
@@ -52,22 +67,11 @@
     }
   }
 
-  function findMount() {
-    return document.querySelector('[data-page-root], main, .main-content, .content, .container, #app, body');
-  }
-
-  function pageId() {
-    const parts = location.pathname.split('/').filter(Boolean);
-    return parts[0] || 'dashboard';
-  }
-
   function render(state) {
     css();
-    if (document.getElementById('max-provider-bridge')) return;
-    const mount = findMount();
-    const el = document.createElement('section');
-    el.id = 'max-provider-bridge';
-    el.className = 'max-provider-bridge';
+    const tsp = panel();
+    if (!tsp || document.getElementById('max-provider-bridge-section')) return;
+
     const providers = state.providers || {};
     const resources = state.resources || {};
     const market = state.market || {};
@@ -75,43 +79,54 @@
     const kucoin = state.kucoin || {};
     const prices = Array.isArray(market.items) ? market.items.filter(x => x && x.success) : [];
     const bestPrice = prices[0];
-    const topSource = bestPrice ? `${bestPrice.symbol || 'BTC'} ${bestPrice.price ? '$' + Number(bestPrice.price).toLocaleString() : ''} · ${bestPrice.source || 'source'}` : 'No live market response yet';
+    const topSource = bestPrice
+      ? `${bestPrice.symbol || 'BTC'} ${bestPrice.price ? '$' + Number(bestPrice.price).toLocaleString() : ''} · ${bestPrice.source || 'source'}`
+      : 'No live market response yet';
     const fng = sentiment.fear_greed && sentiment.fear_greed.ok ? sentiment.fear_greed.data : null;
-    el.innerHTML = `
-      <div class="max-provider-bridge__head">
-        <div>
-          <div class="max-provider-bridge__title">⚡ Live Provider Bridge <span class="max-provider-bridge__pill"><span class="max-provider-bridge__dot"></span> functional layer</span></div>
-          <div class="max-provider-bridge__subtitle">This page is connected to the maximum-provider API layer. Page: <strong>${pageId()}</strong></div>
+
+    const html = `
+      <section id="max-provider-bridge" class="max-provider-bridge">
+        <div class="max-provider-bridge__head">
+          <div>
+            <div class="max-provider-bridge__title">⚡ Live Provider Bridge <span class="max-provider-bridge__pill"><span class="max-provider-bridge__dot"></span> functional layer</span></div>
+            <div class="max-provider-bridge__subtitle">Connected to the maximum-provider API layer. Page: <strong>${tsp.pageId()}</strong></div>
+          </div>
+          <div class="max-provider-bridge__pill">/api/max</div>
+        </div>
+        <div class="max-provider-bridge__grid">
+          <div class="max-provider-bridge__card"><div class="max-provider-bridge__label">Providers</div><div class="max-provider-bridge__value">${providers.healthy_count || 0}/${providers.probed_count || 0}</div></div>
+          <div class="max-provider-bridge__card"><div class="max-provider-bridge__label">Registry</div><div class="max-provider-bridge__value">${((resources.summary || {}).comprehensive_resources || 0) + ((resources.summary || {}).unified_registry_entries || 0)}</div></div>
+          <div class="max-provider-bridge__card"><div class="max-provider-bridge__label">Market sample</div><div class="max-provider-bridge__value small">${topSource}</div></div>
+          <div class="max-provider-bridge__card"><div class="max-provider-bridge__label">Futures / Sentiment</div><div class="max-provider-bridge__value small">KuCoin: ${kucoin.validated ? 'validated' : 'not validated yet'}<br>F&G: ${fng ? `${fng.value} ${fng.classification || ''}` : 'pending'}</div></div>
+        </div>
+        <div class="max-provider-bridge__links">
+          <a href="/api/max/providers/status?include_slow=true" target="_blank" rel="noreferrer">All provider health</a>
+          <a href="/api/max/fallback/plan" target="_blank" rel="noreferrer">Fallback plan</a>
+          <a href="/api/max/pressure/status" target="_blank" rel="noreferrer">Pressure status</a>
+          <a href="/api/max/resources/summary" target="_blank" rel="noreferrer">Resource registry</a>
+          <a href="/api/max/market/snapshot" target="_blank" rel="noreferrer">Market snapshot</a>
+          <a href="/api/max/trading/ohlcv/BTCUSDT" target="_blank" rel="noreferrer">BTC OHLCV</a>
+          <a href="/api/max/trading/orderbook/BTCUSDT" target="_blank" rel="noreferrer">BTC orderbook</a>
+          <a href="/api/max/futures/kucoin/validate/BTCUSDT" target="_blank" rel="noreferrer">KuCoin futures</a>
+          <a href="/api/max/system/visual?symbol=BTC" target="_blank" rel="noreferrer">System visual API</a>
+          <a href="/api/max/help" target="_blank" rel="noreferrer">Max API help</a>
         </div>
-        <div class="max-provider-bridge__pill">/api/max</div>
-      </div>
-      <div class="max-provider-bridge__grid">
-        <div class="max-provider-bridge__card"><div class="max-provider-bridge__label">Providers</div><div class="max-provider-bridge__value">${providers.healthy_count || 0}/${providers.probed_count || 0}</div></div>
-        <div class="max-provider-bridge__card"><div class="max-provider-bridge__label">Registry</div><div class="max-provider-bridge__value">${((resources.summary || {}).comprehensive_resources || 0) + ((resources.summary || {}).unified_registry_entries || 0)}</div></div>
-        <div class="max-provider-bridge__card"><div class="max-provider-bridge__label">Market sample</div><div class="max-provider-bridge__value small">${topSource}</div></div>
-        <div class="max-provider-bridge__card"><div class="max-provider-bridge__label">Futures / Sentiment</div><div class="max-provider-bridge__value small">KuCoin: ${kucoin.validated ? 'validated' : 'not validated yet'}<br>F&G: ${fng ? `${fng.value} ${fng.classification || ''}` : 'pending'}</div></div>
-      </div>
-      <div class="max-provider-bridge__links">
-        <a href="/api/max/providers/status?include_slow=true" target="_blank">All provider health</a>
-        <a href="/api/max/fallback/plan" target="_blank">Fallback plan</a>
-        <a href="/api/max/pressure/status" target="_blank">Pressure status</a>
-        <a href="/api/max/resources/summary" target="_blank">Resource registry</a>
-        <a href="/api/max/market/snapshot" target="_blank">Market snapshot</a>
-        <a href="/api/max/trading/ohlcv/BTCUSDT" target="_blank">BTC OHLCV</a>
-        <a href="/api/max/trading/orderbook/BTCUSDT" target="_blank">BTC orderbook</a>
-        <a href="/api/max/futures/kucoin/validate/BTCUSDT" target="_blank">KuCoin futures</a>
-        <a href="/api/max/system/visual?symbol=BTC" target="_blank">System visual API</a>
-        <a href="/api/max/help" target="_blank">Max API help</a>
-      </div>
-      ${providers.down_count ? `<div class="max-provider-bridge__warn">${providers.down_count} provider probe(s) failed on this check; fallbacks remain available through the chain.</div>` : ''}
+        ${providers.down_count ? `<div class="max-provider-bridge__warn">${providers.down_count} provider probe(s) failed on this check; fallbacks remain available through the chain.</div>` : ''}
+      </section>
     `;
-    const first = mount.firstElementChild;
-    if (first && mount !== document.body) mount.insertBefore(el, first.nextSibling || null);
-    else document.body.insertBefore(el, document.body.firstChild);
+
+    tsp.mountSection('max-provider-bridge-section', '', html);
+    window._topServiceSummary = window._topServiceSummary || {};
+    window._topServiceSummary.bridge = `Providers ${providers.healthy_count || 0}/${providers.probed_count || 0}`;
+    refreshSummary();
   }
 
   async function boot() {
-    if (pageId() === 'dashboard') return; // user's request: do not visually change first page
+    const tsp = panel();
+    if (!tsp || tsp.shouldSkip()) return;
+
+    tsp.ensure(`Page: ${tsp.pageId()} · Loading…`);
+
     const state = {};
     const jobs = [
       ['providers', API.providers],
@@ -129,6 +144,14 @@
     window.MAX_PROVIDER_BRIDGE_STATE = state;
   }
 
-  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
-  else boot();
+  function start() {
+    if (!window.TopServicePanel) {
+      console.warn('TopServicePanel not loaded; bridge panel skipped');
+      return;
+    }
+    boot();
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
+  else start();
 })();