vibespot 1.2.0 → 1.3.0

package/ui/settings.js

@@ -24,6 +24,8 @@ const ENGINE_LABELS = {
 // Open / Close
 // ---------------------------------------------------------------------------
 
+let _prevWorkspaceTab = "pages";
+
 function openSettings(tab) {
   if (typeof closeMenu === "function") closeMenu();
   if (tab) {
@@ -31,12 +33,24 @@ function openSettings(tab) {
     const tabs = document.querySelectorAll("#settings-tabs .settings__tab");
     tabs.forEach((t) => t.classList.toggle("active", t.dataset.tab === tab));
   }
-  document.getElementById("settings-overlay").classList.remove("hidden");
+  const overlay = document.getElementById("settings-overlay");
+  if (overlay) {
+    overlay.classList.remove("hidden");
+  } else if (typeof switchWorkspaceTab === "function") {
+    const activeWs = document.querySelector(".workspace-tab.active");
+    if (activeWs && activeWs.dataset.wsTab !== "settings") _prevWorkspaceTab = activeWs.dataset.wsTab;
+    switchWorkspaceTab("settings");
+  }
   refreshSettings();
 }
 
 function closeSettings() {
-  document.getElementById("settings-overlay").classList.add("hidden");
+  const overlay = document.getElementById("settings-overlay");
+  if (overlay) {
+    overlay.classList.add("hidden");
+  } else if (typeof switchWorkspaceTab === "function") {
+    switchWorkspaceTab(_prevWorkspaceTab || "pages");
+  }
   Object.keys(activePolls).forEach((id) => {
     clearInterval(activePolls[id]);
     delete activePolls[id];
@@ -67,15 +81,43 @@ async function refreshSettings() {
   const body = document.getElementById("settings-body");
   body.innerHTML = `<div class="settings__loading"><div class="settings__spinner-lg"></div><span>Loading environment...</span></div>`;
 
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 3000);
+
   try {
-    const res = await fetch("/api/settings/status");
+    const res = await fetch("/api/settings/status", { signal: controller.signal });
+    clearTimeout(timeout);
     settingsData = await res.json();
     renderSettings(settingsData);
   } catch (err) {
-    body.innerHTML = `<div class="settings__loading" style="color:var(--error)">Failed to load settings</div>`;
+    clearTimeout(timeout);
+    const aborted = err && err.name === "AbortError";
+    renderSettingsError(body, aborted);
   }
 }
 
+function renderSettingsError(body, timedOut) {
+  const message = timedOut
+    ? "Settings took too long to load. The server may be busy or unreachable."
+    : "Failed to load settings.";
+  body.innerHTML = "";
+  const wrap = el("div", "settings__empty-state");
+  wrap.style.cssText = "padding:32px;text-align:center;color:var(--text-muted);";
+  const heading = el("div", "");
+  heading.style.cssText = "font-weight:600;color:var(--text);margin-bottom:8px;";
+  heading.textContent = timedOut ? "Settings unavailable" : "Couldn't load settings";
+  wrap.appendChild(heading);
+  const desc = el("p", "");
+  desc.style.cssText = "margin:0 0 16px;font-size:13px;";
+  desc.textContent = message;
+  wrap.appendChild(desc);
+  const retry = el("button", "btn btn--sm btn--primary");
+  retry.textContent = "Retry";
+  retry.addEventListener("click", () => refreshSettings());
+  wrap.appendChild(retry);
+  body.appendChild(wrap);
+}
+
 function renderSettings(data) {
   const body = document.getElementById("settings-body");
   body.innerHTML = "";
@@ -100,7 +142,7 @@ function renderAITab(body, data) {
   // Engine selector
   const section = el("section", "settings__section");
   section.appendChild(sectionTitle("Engine"));
-  section.appendChild(desc("Choose which AI engine generates your HubSpot sections. API engines need an API key. CLI engines need the tool installed on your system."));
+  section.appendChild(desc("Choose which AI engine generates your HubSpot modules. API engines need an API key. CLI engines need the tool installed on your system."));
 
   const selectEl = el("div", "settings__engine-select");
   const allEngines = [
@@ -176,9 +218,9 @@ function renderAITab(body, data) {
   const agenticMode = config.agenticMode;
 
   if (isCli) {
-    agenticSection.appendChild(desc("Decompose AI generation into specialized agents with per-section parallel calls. Better quality and structured output enforcement. CLI engines use subprocess calls — may be slower than API engines."));
+    agenticSection.appendChild(desc("Decompose AI generation into specialized agents with per-module parallel calls. Better quality and structured output enforcement. CLI engines use subprocess calls — may be slower than API engines."));
   } else {
-    agenticSection.appendChild(desc("Decompose AI generation into specialized agents with per-section parallel calls. Better quality and structured output enforcement."));
+    agenticSection.appendChild(desc("Decompose AI generation into specialized agents with per-module parallel calls. Better quality and structured output enforcement."));
   }
 
   const toggleRow = el("div", "settings__toggle-row");
@@ -189,7 +231,7 @@ function renderAITab(body, data) {
 
   const sub = el("div", "settings__toggle-label-sub");
   if (agenticMode === true) {
-    sub.textContent = "Active — multi-stage pipeline with parallel section generation";
+    sub.textContent = "Active — multi-stage pipeline with parallel module generation";
     sub.style.color = "var(--success)";
   } else if (agenticMode === false) {
     sub.textContent = "Disabled — using single-call mode";
@@ -1057,12 +1099,16 @@ async function switchHsAccount(portalId, btn) {
     });
     const data = await res.json();
     if (data.jobId) {
-      pollJob(data.jobId, () => refreshSettings(), () => {
+      pollJob(data.jobId, () => {
+        refreshSettings();
+        if (typeof refreshPortalIndicator === "function") refreshPortalIndicator();
+      }, () => {
         btn.textContent = "Failed";
         btn.disabled = false;
       });
     } else {
       refreshSettings();
+      if (typeof refreshPortalIndicator === "function") refreshPortalIndicator();
     }
   } catch {
     btn.textContent = "Failed";
@@ -1510,15 +1556,11 @@ function escSettings(str) {
 // Event listeners
 // ---------------------------------------------------------------------------
 
-document.getElementById("settings-close").addEventListener("click", closeSettings);
-document.getElementById("settings-overlay").addEventListener("click", (e) => {
-  if (e.target.id === "settings-overlay") closeSettings();
-});
-
-document.getElementById("btn-setup-settings").addEventListener("click", () => openSettings());
+document.getElementById("btn-setup-settings")?.addEventListener("click", () => openSettings());
 
 document.addEventListener("keydown", (e) => {
-  if (e.key === "Escape" && !document.getElementById("settings-overlay").classList.contains("hidden")) {
+  const settingsTabActive = document.querySelector('.workspace-tab[data-ws-tab="settings"].active');
+  if (e.key === "Escape" && settingsTabActive) {
     closeSettings();
   }
 });