vibespot 1.1.1 → 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 = "";
@@ -551,7 +593,7 @@ function renderFigmaTab(body, data) {
 
   const section = el("section", "settings__section");
   section.appendChild(sectionTitle("Personal Access Token"));
-  section.appendChild(desc("Connect your Figma account to import designs directly into HubSpot CMS modules. Tokens are stored locally and only used to call the Figma API."));
+  section.appendChild(desc("Connect your Figma account to import designs directly into HubSpot CMS sections. Tokens are stored locally and only used to call the Figma API."));
 
   const figmaToken = config.figmaToken;
   const figmaKeyInfo = {
@@ -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";
@@ -1394,36 +1440,47 @@ function getModelsForEngine(engine) {
   switch (engine) {
     case "claude-code":
       return [
-        { id: "sonnet", label: "Claude Sonnet (default)" },
-        { id: "opus", label: "Claude Opus" },
-        { id: "haiku", label: "Claude Haiku" },
+        { id: "claude-opus-4-7", label: "Claude Opus 4.7" },
+        { id: "claude-opus-4-6", label: "Claude Opus 4.6" },
+        { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6 (default)" },
+        { id: "claude-sonnet-4-5", label: "Claude Sonnet 4.5" },
+        { id: "claude-haiku-4-5", label: "Claude Haiku 4.5" },
       ];
     case "anthropic-api":
     case "claude-oauth":
       return [
-        { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
+        { id: "claude-opus-4-7", label: "Claude Opus 4.7" },
         { id: "claude-opus-4-6", label: "Claude Opus 4.6" },
+        { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6 (default)" },
+        { id: "claude-sonnet-4-5", label: "Claude Sonnet 4.5" },
         { id: "claude-haiku-4-5-20251001", label: "Claude Haiku 4.5" },
       ];
     case "openai-api":
       return [
-        { id: "gpt-4o", label: "GPT-4o (default)" },
-        { id: "gpt-4o-mini", label: "GPT-4o Mini" },
-        { id: "o3", label: "o3" },
-        { id: "o4-mini", label: "o4 Mini" },
+        { id: "gpt-5.5", label: "GPT-5.5 (default)" },
+        { id: "gpt-5.5-pro", label: "GPT-5.5 Pro" },
+        { id: "gpt-5.4-mini", label: "GPT-5.4 Mini" },
+        { id: "gpt-5.4-nano", label: "GPT-5.4 Nano" },
+        { id: "gpt-5.3-codex", label: "GPT-5.3 Codex" },
       ];
     case "gemini-cli":
     case "gemini-api":
       return [
-        { id: "gemini-2.5-flash", label: "Gemini 2.5 Flash (default)" },
-        { id: "gemini-2.5-pro", label: "Gemini 2.5 Pro" },
+        { id: "gemini-2.5-pro", label: "Gemini 2.5 Pro (default)" },
+        { id: "gemini-2.5-flash", label: "Gemini 2.5 Flash" },
         { id: "gemini-2.0-flash", label: "Gemini 2.0 Flash" },
       ];
     case "codex-cli":
       return [
-        { id: "o4-mini", label: "o4 Mini (default)" },
-        { id: "o3", label: "o3" },
-        { id: "gpt-4o", label: "GPT-4o" },
+        { id: "gpt-5.5", label: "GPT-5.5 (default)" },
+        { id: "gpt-5.5-pro", label: "GPT-5.5 Pro" },
+        { id: "gpt-5.3-codex", label: "GPT-5.3 Codex" },
+        { id: "gpt-5.2-codex", label: "GPT-5.2 Codex" },
+        { id: "gpt-5.1-codex-max", label: "GPT-5.1 Codex Max" },
+        { id: "gpt-5.1-codex-mini", label: "GPT-5.1 Codex Mini" },
+        { id: "gpt-5.4-mini", label: "GPT-5.4 Mini" },
+        { id: "gpt-5.4-nano", label: "GPT-5.4 Nano" },
+        { id: "codex-mini-latest", label: "Codex Mini (latest)" },
       ];
     default:
       return [];
@@ -1432,10 +1489,13 @@ function getModelsForEngine(engine) {
 
 function getCurrentModel(engine, config) {
   switch (engine) {
-    case "claude-code": return config.claudeCodeModel || "sonnet";
+    case "claude-code": return config.claudeCodeModel || "claude-sonnet-4-6";
     case "anthropic-api":
     case "claude-oauth": return config.anthropicApiModel || "claude-sonnet-4-6";
-    case "openai-api": return config.openaiApiModel || "gpt-4o";
+    case "openai-api": return config.openaiApiModel || "gpt-5.5";
+    case "codex-cli": return config.codexCliModel || "gpt-5.5";
+    case "gemini-cli": return config.geminiCliModel || "gemini-2.5-pro";
+    case "gemini-api": return config.geminiApiModel || "gemini-2.5-pro";
     default: return null;
   }
 }
@@ -1496,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();
   }
 });