vibespot 1.3.0 → 1.5.0

package/ui/index.html

@@ -909,28 +909,8 @@
           </div>
         </section>
 
-        <!-- ================ SETTINGS TAB (formerly modal overlay) ================ -->
+        <!-- ================ SETTINGS (now uses global overlay) ================ -->
         <section class="workspace-panel workspace-panel--settings" id="ws-panel-settings" data-ws-panel="settings" role="tabpanel" aria-labelledby="ws-tab-settings">
-          <div class="dashboard__container">
-
-            <header class="settings__header">
-              <h2 class="settings__title">Settings</h2>
-            </header>
-            <nav class="settings__tabs" id="settings-tabs" role="tablist" aria-label="Settings categories">
-              <button class="settings__tab active" data-tab="ai" type="button" role="tab" aria-selected="true">AI</button>
-              <button class="settings__tab" data-tab="hubspot" type="button" role="tab" aria-selected="false">HubSpot</button>
-              <button class="settings__tab" data-tab="figma" type="button" role="tab" aria-selected="false">Figma</button>
-              <button class="settings__tab" data-tab="github" type="button" role="tab" aria-selected="false">GitHub</button>
-              <button class="settings__tab" data-tab="vibespot" type="button" role="tab" aria-selected="false">vibeSpot</button>
-            </nav>
-            <div class="settings__body" id="settings-body" role="tabpanel">
-              <div class="settings__loading">
-                <div class="settings__spinner-lg" aria-hidden="true"></div>
-                <span>Loading environment...</span>
-              </div>
-            </div>
-
-          </div>
         </section>
 
       </div><!-- /.dashboard__body -->
@@ -981,6 +961,31 @@
 
   </div><!-- /.app-body -->
 
+  <!-- ============================================================ -->
+  <!-- SETTINGS OVERLAY — global modal, works from any screen       -->
+  <!-- ============================================================ -->
+  <div class="settings-overlay hidden" id="settings-overlay">
+    <div class="settings-panel">
+      <header class="settings__header">
+        <h2 class="settings__title">Settings</h2>
+        <button class="settings__close" id="settings-close" type="button" aria-label="Close settings">&times;</button>
+      </header>
+      <nav class="settings__tabs" id="settings-tabs" role="tablist" aria-label="Settings categories">
+        <button class="settings__tab active" data-tab="ai" type="button" role="tab" aria-selected="true">AI</button>
+        <button class="settings__tab" data-tab="hubspot" type="button" role="tab" aria-selected="false">HubSpot</button>
+        <button class="settings__tab" data-tab="figma" type="button" role="tab" aria-selected="false">Figma</button>
+        <button class="settings__tab" data-tab="github" type="button" role="tab" aria-selected="false">GitHub</button>
+        <button class="settings__tab" data-tab="vibespot" type="button" role="tab" aria-selected="false">vibeSpot</button>
+      </nav>
+      <div class="settings__body" id="settings-body" role="tabpanel">
+        <div class="settings__loading">
+          <div class="settings__spinner-lg" aria-hidden="true"></div>
+          <span>Loading environment...</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script src="/vendor/marked.umd.js"></script>
   <script src="/vendor/codemirror-bundle.global.js"></script>
   <script src="/icons.js"></script>

package/ui/settings.js

@@ -18,14 +18,13 @@ const ENGINE_LABELS = {
   "gemini-cli": "Gemini CLI",
   "gemini-api": "Gemini API",
   "codex-cli": "OpenAI Codex",
+  "langdock-api": "Langdock",
 };
 
 // ---------------------------------------------------------------------------
 // Open / Close
 // ---------------------------------------------------------------------------
 
-let _prevWorkspaceTab = "pages";
-
 function openSettings(tab) {
   if (typeof closeMenu === "function") closeMenu();
   if (tab) {
@@ -34,23 +33,13 @@ function openSettings(tab) {
     tabs.forEach((t) => t.classList.toggle("active", t.dataset.tab === tab));
   }
   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");
-  }
+  if (overlay) overlay.classList.remove("hidden");
   refreshSettings();
 }
 
 function closeSettings() {
   const overlay = document.getElementById("settings-overlay");
-  if (overlay) {
-    overlay.classList.add("hidden");
-  } else if (typeof switchWorkspaceTab === "function") {
-    switchWorkspaceTab(_prevWorkspaceTab || "pages");
-  }
+  if (overlay) overlay.classList.add("hidden");
   Object.keys(activePolls).forEach((id) => {
     clearInterval(activePolls[id]);
     delete activePolls[id];
@@ -153,6 +142,7 @@ function renderAITab(body, data) {
     { id: "gemini-cli", label: "Gemini CLI" },
     { id: "gemini-api", label: "Gemini API" },
     { id: "codex-cli", label: "Codex CLI" },
+    { id: "langdock-api", label: "Langdock" },
   ];
 
   for (const eng of allEngines) {
@@ -271,6 +261,7 @@ function renderAITab(body, data) {
     { key: "anthropic", name: "Anthropic", placeholder: "sk-ant-api03-..." },
     { key: "openai", name: "OpenAI", placeholder: "sk-..." },
     { key: "gemini", name: "Google AI", placeholder: "AIza..." },
+    { key: "langdock", name: "Langdock", placeholder: "ld-..." },
   ];
 
   for (const prov of providers) {
@@ -1482,6 +1473,14 @@ function getModelsForEngine(engine) {
         { id: "gpt-5.4-nano", label: "GPT-5.4 Nano" },
         { id: "codex-mini-latest", label: "Codex Mini (latest)" },
       ];
+    case "langdock-api":
+      return [
+        { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6 (default)" },
+        { id: "claude-opus-4-7", label: "Claude Opus 4.7" },
+        { id: "claude-opus-4-6", label: "Claude Opus 4.6" },
+        { id: "claude-sonnet-4-5", label: "Claude Sonnet 4.5" },
+        { id: "claude-haiku-4-5-20251001", label: "Claude Haiku 4.5" },
+      ];
     default:
       return [];
   }
@@ -1496,6 +1495,7 @@ function getCurrentModel(engine, config) {
     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";
+    case "langdock-api": return config.langdockApiModel || "claude-sonnet-4-6";
     default: return null;
   }
 }
@@ -1558,9 +1558,15 @@ function escSettings(str) {
 
 document.getElementById("btn-setup-settings")?.addEventListener("click", () => openSettings());
 
+document.getElementById("settings-close")?.addEventListener("click", () => closeSettings());
+
+document.getElementById("settings-overlay")?.addEventListener("click", (e) => {
+  if (e.target.id === "settings-overlay") closeSettings();
+});
+
 document.addEventListener("keydown", (e) => {
-  const settingsTabActive = document.querySelector('.workspace-tab[data-ws-tab="settings"].active');
-  if (e.key === "Escape" && settingsTabActive) {
+  const overlay = document.getElementById("settings-overlay");
+  if (e.key === "Escape" && overlay && !overlay.classList.contains("hidden")) {
     closeSettings();
   }
 });