svrnty-hermes-webui-plugin/static/app.js

// Svrnty plugin frontend — Hermes WebUI extensions.
// Loaded via /plugins/svrnty/app.js (registered by plugin.py register_static).
// Runs in WebUI origin with full session authority. Additive + idempotent.
(function () {
  "use strict";
  if (window.__svrntyExtLoaded) return;
  window.__svrntyExtLoaded = true;

  // ── Vault status panel (migrated from fork commit 3e2c74f3) ─────────────
  // Injects a "Vault connections" section into Settings → System on demand,
  // populates it from GET /api/vault/status (served by plugin/routes/vault_status.py).
  const VAULT_LABELS = {
    anthropic: "Anthropic", gitea: "Gitea", "keycloak-planb": "Keycloak (Plan B)",
    meta: "Meta", "google-ads": "Google Ads", "google-ai": "Google AI",
    "google-business": "Google Business", "google-search-console": "Search Console",
    quickbooks: "QuickBooks", "google-analytics": "Google Analytics",
    mailchimp: "Mailchimp", paypal: "PayPal", square: "Square",
    woocommerce: "WooCommerce", "wordpress-admin": "WordPress",
    agendrix: "Agendrix", perplexity: "Perplexity", wix: "Wix",
  };

  function _injectVaultPanel() {
    // Already injected?
    if (document.getElementById("vaultStatusSection")) return true;
    // Anchor after the gateway-status card in System settings.
    const anchor = document.getElementById("gatewayStatusCard");
    if (!anchor) return false;
    const section = document.createElement("div");
    section.id = "vaultStatusSection";
    section.style.marginTop = "16px";
    section.innerHTML =
      '<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">' +
      '<div style="font-weight:500;font-size:13px">Vault connections</div>' +
      '<button id="vaultRefreshBtn" style="background:none;border:1px solid var(--border2);color:var(--text);padding:2px 8px;border-radius:4px;font-size:11px;cursor:pointer">Refresh</button>' +
      "</div>" +
      '<div style="font-size:11px;color:var(--muted);margin-bottom:8px">credctl-managed secrets — green = present, grey = absent</div>' +
      '<div id="vaultStatusList"><span style="color:var(--muted);font-size:12px">Loading…</span></div>';
    anchor.parentNode.insertBefore(section, anchor.nextSibling);
    document.getElementById("vaultRefreshBtn").addEventListener("click", _loadVaultStatus);
    return true;
  }

  function _loadVaultStatus() {
    const list = document.getElementById("vaultStatusList");
    if (!list) return;
    fetch("/api/vault/status")
      .then((r) => r.json())
      .then((r) => {
        const present = new Set((r.secrets || []).map((s) => s.name));
        const names = Object.keys(VAULT_LABELS);
        list.innerHTML =
          '<div style="display:flex;flex-wrap:wrap;gap:6px">' +
          names.map((name) => {
            const ok = present.has(name);
            const color = ok ? "#22c55e" : "#6b7280";
            const label = VAULT_LABELS[name] || name;
            return (
              '<span style="display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:var(--code-bg);border:1px solid var(--border2);border-radius:12px;font-size:12px">' +
              `<span style="width:7px;height:7px;border-radius:50%;background:${color};flex-shrink:0"></span>` +
              label.replace(/[<>&]/g, (c) => ({ "<": "&lt;", ">": "&gt;", "&": "&amp;" }[c])) +
              "</span>"
            );
          }).join("") +
          "</div>";
      })
      .catch(() => {
        list.innerHTML = '<div style="color:#ef4444;font-size:12px">Failed to load vault status</div>';
      });
  }

  // Watch for the System settings tab opening; inject + load when it appears.
  // The panel exists in the DOM only after the user navigates Settings → System.
  function _hookSystemPanelOpen() {
    const observer = new MutationObserver(() => {
      if (_injectVaultPanel()) _loadVaultStatus();
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", _hookSystemPanelOpen);
  } else {
    _hookSystemPanelOpen();
  }
})();