vibespot 1.3.1 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibespot",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "description": "AI-powered HubSpot CMS landing page builder — vibe coding & React converter",
   "type": "module",
   "bin": {
@@ -19,7 +19,8 @@
     "build": "tsup",
     "test": "vitest run",
     "test:watch": "vitest",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "contact-monitor": "tsx scripts/contact-monitor.ts"
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.92.0",

package/ui/dashboard.js

@@ -1292,15 +1292,16 @@ if (humanifyCheckbox) {
 // ---------------------------------------------------------------------------
 
 function switchWorkspaceTab(tabName) {
+  if (tabName === "settings") {
+    if (typeof openSettings === "function") openSettings();
+    return;
+  }
   document.querySelectorAll(".workspace-tab").forEach((btn) => {
     btn.classList.toggle("active", btn.dataset.wsTab === tabName);
   });
   document.querySelectorAll(".workspace-panel").forEach((panel) => {
     panel.classList.toggle("active", panel.dataset.wsPanel === tabName);
   });
-  if (tabName === "settings" && typeof refreshSettings === "function") {
-    refreshSettings();
-  }
   if (tabName === "library") {
     refreshDashboard();
   }

package/ui/docs/index.html

@@ -112,6 +112,12 @@
     <a class="doc-nav__link doc-nav__link--sub" href="#auto-fix">Auto-Fix</a>
     <a class="doc-nav__link doc-nav__link--sub" href="#creating-page-hubspot">Creating a Page</a>
     <a class="doc-nav__link" href="#zip-download">ZIP Download</a>
+    <a class="doc-nav__link" href="#docker-deployment">Docker Deployment</a>
+    <a class="doc-nav__link doc-nav__link--sub" href="#docker-quick-start">Quick Start</a>
+    <a class="doc-nav__link doc-nav__link--sub" href="#docker-https">HTTPS with Caddy</a>
+    <a class="doc-nav__link doc-nav__link--sub" href="#docker-env-vars">Environment Variables</a>
+    <a class="doc-nav__link doc-nav__link--sub" href="#docker-persistence">Persistence</a>
+    <a class="doc-nav__link doc-nav__link--sub" href="#docker-reverse-proxy">Reverse Proxy &amp; k8s</a>
     <a class="doc-nav__link" href="#marketplace">Marketplace</a>
     <a class="doc-nav__link" href="#version-history">Version History</a>
   </div>
@@ -195,7 +201,7 @@ vibespot</code></pre>
     <div class="doc-feature">
       <div class="doc-feature__icon">&#127912;</div>
       <div class="doc-feature__title">Multi-Engine AI</div>
-      <div class="doc-feature__desc">Works with Anthropic, OpenAI, Gemini, Claude Code, Gemini CLI, and Codex CLI.</div>
+      <div class="doc-feature__desc">Works with Anthropic, OpenAI, Gemini, Langdock, Claude Code, Gemini CLI, and Codex CLI.</div>
     </div>
     <div class="doc-feature">
       <div class="doc-feature__icon">&#128338;</div>
@@ -213,7 +219,7 @@ vibespot</code></pre>
   <p>vibeSpot stores its configuration at <code>~/.vibespot/config.json</code>. You can configure everything through the Settings panel in the web UI, or by editing the config file directly.</p>
 
   <h3 id="ai-engines">AI Engines</h3>
-  <p>vibeSpot supports seven AI engines. You only need one to get started. The table below compares them:</p>
+  <p>vibeSpot supports eight AI engines. You only need one to get started. The table below compares them:</p>
 
   <table>
     <thead>
@@ -225,6 +231,7 @@ vibespot</code></pre>
       <tr><td>Claude OAuth</td><td>API</td><td>Run <code>claude setup-token</code>, paste token</td><td>Included in Claude subscription</td><td>Subscribers without API budget</td></tr>
       <tr><td>OpenAI API</td><td>API</td><td>Add <code>OPENAI_API_KEY</code></td><td>Pay-per-token</td><td>GPT-5.5 users, existing OpenAI budget</td></tr>
       <tr><td>Gemini API</td><td>API</td><td>Add <code>GEMINI_API_KEY</code></td><td>Free tier available</td><td>Cost-conscious users, free quota</td></tr>
+      <tr><td>Langdock</td><td>API</td><td>Add <code>LANGDOCK_API_KEY</code></td><td>Pay-per-token (via Langdock)</td><td>EU data residency, GDPR compliance</td></tr>
       <tr><td>Gemini CLI</td><td>CLI</td><td>Install <code>gemini</code> CLI, authenticate</td><td>Free (with Google account)</td><td>Free option without API keys</td></tr>
       <tr><td>Codex CLI</td><td>CLI</td><td>Install <code>codex</code> CLI, authenticate</td><td>Included in OpenAI subscription</td><td>OpenAI subscribers</td></tr>
     </tbody>
@@ -237,6 +244,7 @@ vibespot</code></pre>
       <button class="doc-tabs__tab" data-tab="tab-claude-oauth">Claude OAuth</button>
       <button class="doc-tabs__tab" data-tab="tab-openai">OpenAI API</button>
       <button class="doc-tabs__tab" data-tab="tab-gemini-api">Gemini API</button>
+      <button class="doc-tabs__tab" data-tab="tab-langdock">Langdock</button>
       <button class="doc-tabs__tab" data-tab="tab-gemini-cli">Gemini CLI</button>
       <button class="doc-tabs__tab" data-tab="tab-codex">Codex CLI</button>
     </div>
@@ -284,6 +292,18 @@ vibespot</code></pre>
         <li>Select <strong>Gemini API</strong> as the engine.</li>
       </ol>
     </div>
+    <div class="doc-tabs__panel" id="tab-langdock">
+      <p>Langdock is an EU-hosted AI gateway based in Frankfurt. It routes Claude requests through an Anthropic-compatible endpoint, so all Anthropic features (prompt caching, structured output, extended thinking) work unchanged. Langdock provides a single GDPR-native DPA covering OpenAI, Anthropic, Mistral, and Google models.</p>
+      <ol class="doc-steps">
+        <li>Sign up at <a href="https://langdock.com" target="_blank">langdock.com</a> and generate an API key.</li>
+        <li>In vibeSpot Settings &rarr; AI tab, paste the key into the Langdock API Key field. Or set the environment variable: <code>export LANGDOCK_API_KEY=...</code></li>
+        <li>Select <strong>Langdock</strong> as the engine. The default model is <code>claude-sonnet-4-20250514</code>. All Claude models are available through the gateway.</li>
+      </ol>
+      <div class="doc-callout doc-callout--info">
+        <div class="doc-callout__label">&#8505; Self-Hosted Deployments</div>
+        <p>For private-cloud or self-hosted Langdock installations, set <code>LANGDOCK_BASE_URL</code> to override the default endpoint (<code>https://api.langdock.com/anthropic</code>). You can also set this in the config file as <code>langdockBaseUrl</code>.</p>
+      </div>
+    </div>
     <div class="doc-tabs__panel" id="tab-gemini-cli">
       <p>The Gemini CLI runs as a local subprocess, similar to Claude Code.</p>
       <ol class="doc-steps">
@@ -325,10 +345,13 @@ vibespot</code></pre>
       <tr><th>Field</th><th>Type</th><th>Description</th></tr>
     </thead>
     <tbody>
-      <tr><td><code>aiEngine</code></td><td>string</td><td>Active AI engine: <code>"anthropic-api"</code>, <code>"claude-code"</code>, <code>"claude-oauth"</code>, <code>"openai-api"</code>, <code>"gemini-api"</code>, <code>"gemini-cli"</code>, <code>"codex-cli"</code></td></tr>
+      <tr><td><code>aiEngine</code></td><td>string</td><td>Active AI engine: <code>"anthropic-api"</code>, <code>"claude-code"</code>, <code>"claude-oauth"</code>, <code>"openai-api"</code>, <code>"gemini-api"</code>, <code>"langdock-api"</code>, <code>"gemini-cli"</code>, <code>"codex-cli"</code></td></tr>
       <tr><td><code>anthropicApiKey</code></td><td>string</td><td>Anthropic API key (starts with <code>sk-ant-</code>)</td></tr>
       <tr><td><code>openaiApiKey</code></td><td>string</td><td>OpenAI API key (starts with <code>sk-</code>)</td></tr>
       <tr><td><code>geminiApiKey</code></td><td>string</td><td>Google AI / Gemini API key</td></tr>
+      <tr><td><code>langdockApiKey</code></td><td>string</td><td>Langdock API key for the EU gateway</td></tr>
+      <tr><td><code>langdockApiModel</code></td><td>string</td><td>Langdock model override (default: <code>claude-sonnet-4-20250514</code>)</td></tr>
+      <tr><td><code>langdockBaseUrl</code></td><td>string</td><td>Override Langdock endpoint for self-hosted/private-cloud deployments (default: <code>https://api.langdock.com/anthropic</code>)</td></tr>
       <tr><td><code>claudeCodeModel</code></td><td>string</td><td>Model override for Claude Code CLI</td></tr>
       <tr><td><code>anthropicApiModel</code></td><td>string</td><td>Anthropic API model (default: <code>claude-sonnet-4-20250514</code>)</td></tr>
       <tr><td><code>openaiApiModel</code></td><td>string</td><td>OpenAI API model (default: <code>gpt-5.5</code>)</td></tr>
@@ -342,7 +365,7 @@ vibespot</code></pre>
   </table>
 
   <h3 id="env-vars">Environment Variables</h3>
-  <p>API keys can also be set as environment variables. The config file takes precedence &mdash; environment variables are used as fallbacks when no key is set in the config:</p>
+  <p>API keys and server settings can be set as environment variables. The config file takes precedence &mdash; environment variables are used as fallbacks when no key is set in the config. In Docker deployments, env vars are the primary configuration method (see <a href="#docker-deployment">Docker Deployment</a>).</p>
   <table>
     <thead>
       <tr><th>Variable</th><th>Description</th></tr>
@@ -352,6 +375,14 @@ vibespot</code></pre>
       <tr><td><code>OPENAI_API_KEY</code></td><td>OpenAI API key for GPT models</td></tr>
       <tr><td><code>GEMINI_API_KEY</code></td><td>Google AI API key for Gemini models</td></tr>
       <tr><td><code>GOOGLE_AI_API_KEY</code></td><td>Alternative name for the Gemini API key (same effect as <code>GEMINI_API_KEY</code>)</td></tr>
+      <tr><td><code>LANGDOCK_API_KEY</code></td><td>Langdock EU gateway key</td></tr>
+      <tr><td><code>LANGDOCK_BASE_URL</code></td><td>Override Langdock endpoint for self-hosted deployments</td></tr>
+      <tr><td><code>HUBSPOT_PERSONAL_ACCESS_KEY</code></td><td>HubSpot PAK &mdash; enables theme upload without configuring through the UI</td></tr>
+      <tr><td><code>FIGMA_TOKEN</code></td><td>Figma personal access token for design import</td></tr>
+      <tr><td><code>VIBESPOT_AI_ENGINE</code></td><td>Default engine: <code>anthropic-api</code>, <code>openai-api</code>, <code>gemini-api</code>, <code>langdock-api</code></td></tr>
+      <tr><td><code>VIBESPOT_AGENTIC_MODE</code></td><td>Set <code>true</code> to enable the multi-stage agentic pipeline</td></tr>
+      <tr><td><code>VIBESPOT_PORT</code></td><td>Override the HTTP server port (default: <code>4200</code>)</td></tr>
+      <tr><td><code>VIBESPOT_NO_OPEN</code></td><td>Set <code>1</code> to suppress auto-opening the browser on startup</td></tr>
     </tbody>
   </table>
 </div>
@@ -1264,6 +1295,76 @@ testimonial carousel, and a minimal footer with social links.</code></pre>
   </div>
 </div>
 
+<!-- ============================================================
+     Section: Docker Deployment
+     ============================================================ -->
+<div class="doc-section" id="docker-deployment">
+  <h2 id="docker-deployment-heading">Docker Deployment <a href="#docker-deployment" class="doc-anchor">#</a></h2>
+  <p>Run vibeSpot as a containerised service for your team. The Docker image bundles the server, UI, and all dependencies &mdash; just add an AI API key.</p>
+
+  <h3 id="docker-quick-start">Quick Start (LAN / VPN) <a href="#docker-quick-start" class="doc-anchor">#</a></h3>
+  <pre><code>cp .env.example .env
+# Edit .env &mdash; set at least one AI API key (e.g. ANTHROPIC_API_KEY)
+docker compose up -d</code></pre>
+  <p>Open <code>http://&lt;host-ip&gt;:4200</code> in a browser. All AI keys, engine selection, and HubSpot credentials are configured via the <code>.env</code> file &mdash; no interactive setup needed.</p>
+
+  <h3 id="docker-https">HTTPS with Caddy <a href="#docker-https" class="doc-anchor">#</a></h3>
+  <p>For public or semi-public deployments, activate the Caddy reverse proxy profile. Caddy auto-provisions a TLS certificate from Let&rsquo;s Encrypt.</p>
+  <pre><code>cp .env.example .env
+# Set VIBESPOT_DOMAIN=vibespot.example.com and your AI key
+docker compose --profile https up -d</code></pre>
+  <p>Caddy binds ports 80 and 443. Point your DNS A record at the host, and HTTPS works automatically.</p>
+
+  <h3 id="docker-env-vars">Environment Variables <a href="#docker-env-vars" class="doc-anchor">#</a></h3>
+  <p>The Docker image reads all configuration from environment variables. The <code>.env.example</code> file documents every option.</p>
+
+  <table>
+    <thead>
+      <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+    </thead>
+    <tbody>
+      <tr><td><code>VIBESPOT_PORT</code></td><td><code>4200</code></td><td>Port the server listens on inside the container</td></tr>
+      <tr><td><code>VIBESPOT_DOMAIN</code></td><td>&mdash;</td><td>Public domain for the Caddy HTTPS profile</td></tr>
+      <tr><td><code>VIBESPOT_NO_OPEN</code></td><td><code>1</code></td><td>Suppress auto-open browser (set automatically in Docker)</td></tr>
+      <tr><td><code>VIBESPOT_AI_ENGINE</code></td><td>&mdash;</td><td>Default engine: <code>anthropic-api</code>, <code>openai-api</code>, <code>gemini-api</code>, <code>langdock-api</code></td></tr>
+      <tr><td><code>VIBESPOT_AGENTIC_MODE</code></td><td>&mdash;</td><td>Set <code>true</code> to enable the multi-stage agentic pipeline</td></tr>
+      <tr><td><code>ANTHROPIC_API_KEY</code></td><td>&mdash;</td><td>Anthropic Claude API key</td></tr>
+      <tr><td><code>OPENAI_API_KEY</code></td><td>&mdash;</td><td>OpenAI API key</td></tr>
+      <tr><td><code>GEMINI_API_KEY</code></td><td>&mdash;</td><td>Google Gemini API key</td></tr>
+      <tr><td><code>LANGDOCK_API_KEY</code></td><td>&mdash;</td><td>Langdock EU gateway key</td></tr>
+      <tr><td><code>HUBSPOT_PERSONAL_ACCESS_KEY</code></td><td>&mdash;</td><td>HubSpot PAK for theme uploads</td></tr>
+      <tr><td><code>FIGMA_TOKEN</code></td><td>&mdash;</td><td>Figma personal access token for design import</td></tr>
+    </tbody>
+  </table>
+
+  <h3 id="docker-persistence">Persistence <a href="#docker-persistence" class="doc-anchor">#</a></h3>
+  <p>Two named Docker volumes keep data across container restarts:</p>
+  <table>
+    <thead>
+      <tr><th>Volume</th><th>Container path</th><th>Contents</th></tr>
+    </thead>
+    <tbody>
+      <tr><td><code>vibespot-config</code></td><td><code>/home/vibespot/.vibespot</code></td><td>config.json, session data</td></tr>
+      <tr><td><code>vibespot-themes</code></td><td><code>/home/vibespot/vibespot-themes</code></td><td>Generated HubSpot themes</td></tr>
+    </tbody>
+  </table>
+  <p>To back up:</p>
+  <pre><code>docker compose cp vibespot:/home/vibespot/.vibespot ./backup-config
+docker compose cp vibespot:/home/vibespot/vibespot-themes ./backup-themes</code></pre>
+
+  <h3 id="docker-reverse-proxy">Reverse Proxy &amp; Kubernetes <a href="#docker-reverse-proxy" class="doc-anchor">#</a></h3>
+  <p>If you already have a reverse proxy (nginx, Traefik, k8s Ingress), skip the Caddy profile and point your proxy at port 4200. Key requirements:</p>
+  <ul>
+    <li><strong>WebSocket upgrade</strong> &mdash; the chat, pipeline progress, and upload UI all use a persistent WebSocket connection.</li>
+    <li><strong>Timeout &gt; 120s</strong> &mdash; agentic AI generation can run for several minutes. Set read/send timeouts to at least 300s.</li>
+    <li><strong>No buffering</strong> &mdash; for streaming AI responses, disable proxy buffering.</li>
+  </ul>
+  <div class="doc-callout doc-callout--tip">
+    <div class="doc-callout__label">&#128214; Full guide</div>
+    <p>For nginx configs, Kubernetes manifests, security considerations, and troubleshooting, see the complete <a href="https://github.com/borismichel/vibespot/blob/main/docs/docker-deployment.md" target="_blank">Docker Deployment Guide</a>.</p>
+  </div>
+</div>
+
 <!-- ============================================================
      Section: HubSpot Marketplace publication path
      ============================================================ -->

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();
   }
 });