vibespot 1.3.1 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibespot",
-  "version": "1.3.1",
+  "version": "1.5.1",
   "description": "AI-powered HubSpot CMS landing page builder — vibe coding & React converter",
   "type": "module",
   "bin": {
@@ -19,10 +19,14 @@
     "build": "tsup",
     "test": "vitest run",
     "test:watch": "vitest",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "contact-monitor": "tsx scripts/contact-monitor.ts",
+    "docker:publish": "scripts/docker-publish.sh",
+    "docker:publish:multi": "scripts/docker-publish.sh --multi-arch",
+    "docker:smoke": "scripts/docker-publish.sh --smoke --dry-run"
   },
   "dependencies": {
-    "@anthropic-ai/sdk": "^0.92.0",
+    "@anthropic-ai/sdk": "^0.96.0",
     "@clack/prompts": "^1.3.0",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.11",

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,115 @@ 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. The image is published to the GitHub Container Registry and is <strong>public</strong>, so no login or repository checkout is required to pull it.</p>
+
+  <pre><code>docker pull ghcr.io/borismichel/vibespot:latest</code></pre>
+  <p>Tags: <code>latest</code> (most recent release), <code>1.5.0</code> / <code>1.5</code> (specific version), <code>main</code> (latest commit, may be unstable). Pin a version for production.</p>
+
+  <h3 id="docker-quick-start">Quick Start (LAN / VPN) <a href="#docker-quick-start" class="doc-anchor">#</a></h3>
+  <p>Run the public image directly &mdash; no repository or compose file needed:</p>
+  <pre><code>docker run -d --name vibespot \
+  -p 4200:4200 \
+  -e VIBESPOT_AI_ENGINE=anthropic-api \
+  -e VIBESPOT_AGENTIC_MODE=true \
+  -e ANTHROPIC_API_KEY=sk-ant-... \
+  -v vibespot-config:/home/vibespot/.vibespot \
+  -v vibespot-themes:/home/vibespot/vibespot-themes \
+  ghcr.io/borismichel/vibespot:latest</code></pre>
+  <p>Open <code>http://&lt;host-ip&gt;:4200</code> in a browser. Swap the engine and key for whichever provider you use. The two volumes keep config and generated themes across restarts.</p>
+
+  <h3 id="docker-https">HTTPS with Caddy <a href="#docker-https" class="doc-anchor">#</a></h3>
+  <p>For public or semi-public deployments, put a <a href="https://caddyserver.com/" target="_blank">Caddy</a> reverse proxy in front to auto-provision a Let&rsquo;s Encrypt TLS certificate. Save a <code>docker-compose.yml</code> and <code>Caddyfile</code> in a directory, then run <code>docker compose up -d</code>.</p>
+  <pre><code># docker-compose.yml
+services:
+  vibespot:
+    image: ghcr.io/borismichel/vibespot:latest
+    restart: unless-stopped
+    environment:
+      VIBESPOT_AI_ENGINE: anthropic-api
+      VIBESPOT_AGENTIC_MODE: "true"
+      ANTHROPIC_API_KEY: ${ANTHROPIC_API_KEY}
+    volumes:
+      - vibespot-config:/home/vibespot/.vibespot
+      - vibespot-themes:/home/vibespot/vibespot-themes
+    expose: ["4200"]
+  caddy:
+    image: caddy:2-alpine
+    restart: unless-stopped
+    ports: ["80:80", "443:443"]
+    volumes:
+      - ./Caddyfile:/etc/caddy/Caddyfile:ro
+      - caddy-data:/data
+    depends_on: [vibespot]
+volumes:
+  vibespot-config:
+  vibespot-themes:
+  caddy-data:</code></pre>
+  <pre><code># Caddyfile (set your real domain)
+vibespot.example.com {
+  @websockets {
+    header Connection *Upgrade*
+    header Upgrade websocket
+  }
+  reverse_proxy @websockets vibespot:4200
+  reverse_proxy vibespot:4200
+}</code></pre>
+  <p>Caddy binds ports 80 and 443. Point your DNS A record at the host, and HTTPS works automatically. The <code>@websockets</code> rule is required &mdash; the chat and generation pipeline run over a persistent WebSocket.</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_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>Mount the themes volume at exactly <code>/home/vibespot/vibespot-themes</code> &mdash; that is where the app writes generated themes. Without it, themes are lost when the container is recreated. To back up:</p>
+  <pre><code>docker cp vibespot:/home/vibespot/.vibespot ./backup-config
+docker 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">&#9888;&#65039; Single instance &amp; auth</div>
+    <p>vibeSpot keeps active sessions in memory &mdash; run a single instance (no horizontal scaling without sticky sessions). It runs as a non-root user and has <strong>no built-in authentication</strong>. For internet-facing deployments, put an authenticating proxy (OAuth2 Proxy, Authelia, Cloudflare Access) in front. Persistence is filesystem-only on the named volumes &mdash; there is no database to run.</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) {
@@ -166,8 +156,43 @@ function renderAITab(body, data) {
   }
   section.appendChild(selectEl);
 
-  // Model selector
+  // Langdock provider selector — shown only when Langdock is the active engine
   const activeEngine = config.aiEngine || (env.availableEngines.length > 0 ? env.availableEngines[0] : null);
+  const langdockProvider = config.langdockProvider || "anthropic";
+
+  if (activeEngine === "langdock-api") {
+    const providerRow = el("div", "settings__model-row");
+    const providerLabel = el("span", "settings__card-label");
+    providerLabel.textContent = "Provider";
+    providerRow.appendChild(providerLabel);
+
+    const providerSelect = el("select", "settings__model-select");
+    const providers = [
+      { id: "anthropic", label: "Anthropic (Claude)" },
+      { id: "openai", label: "OpenAI (GPT)" },
+      { id: "google", label: "Google (Gemini)" },
+      { id: "mistral", label: "Mistral" },
+    ];
+    for (const p of providers) {
+      const opt = document.createElement("option");
+      opt.value = p.id;
+      opt.textContent = p.label;
+      if (p.id === langdockProvider) opt.selected = true;
+      providerSelect.appendChild(opt);
+    }
+    providerSelect.addEventListener("change", async () => {
+      await fetch("/api/settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ langdockProvider: providerSelect.value }),
+      });
+      refreshSettings();
+    });
+    providerRow.appendChild(providerSelect);
+    section.appendChild(providerRow);
+  }
+
+  // Model selector
   if (activeEngine) {
     const modelRow = el("div", "settings__model-row");
     const modelLabel = el("span", "settings__card-label");
@@ -271,6 +296,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) {
@@ -442,7 +468,10 @@ function renderAICapabilitiesSection(activeEngine, config) {
   section.appendChild(desc("Advanced model features. Some are configurable directly; some auto-engage based on the active engine."));
 
   // Engine classification — different engines have different feature surfaces.
-  const isAnthropicAPI = activeEngine === "anthropic-api" || activeEngine === "claude-oauth";
+  // Langdock inherits capabilities from the selected upstream provider.
+  const ldProv = (config.langdockProvider || "anthropic");
+  const isLangdockAnthropic = activeEngine === "langdock-api" && ldProv === "anthropic";
+  const isAnthropicAPI = activeEngine === "anthropic-api" || activeEngine === "claude-oauth" || isLangdockAnthropic;
   const isClaudeCode = activeEngine === "claude-code";
   const isAnthropicAny = isAnthropicAPI || isClaudeCode;
 
@@ -1482,6 +1511,38 @@ function getModelsForEngine(engine) {
         { id: "gpt-5.4-nano", label: "GPT-5.4 Nano" },
         { id: "codex-mini-latest", label: "Codex Mini (latest)" },
       ];
+    case "langdock-api": {
+      const ldProvider = (settingsData && settingsData.config && settingsData.config.langdockProvider) || "anthropic";
+      const ldModels = {
+        anthropic: [
+          { 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" },
+        ],
+        openai: [
+          { id: "gpt-4.1", label: "GPT-4.1 (default)" },
+          { id: "gpt-4.1-mini", label: "GPT-4.1 Mini" },
+          { id: "gpt-4.1-nano", label: "GPT-4.1 Nano" },
+          { id: "gpt-4o", label: "GPT-4o" },
+          { id: "o3-mini", label: "o3 Mini" },
+        ],
+        google: [
+          { 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" },
+        ],
+        mistral: [
+          { id: "mistral-large-latest", label: "Mistral Large (default)" },
+          { id: "mistral-medium-latest", label: "Mistral Medium" },
+          { id: "mistral-small-latest", label: "Mistral Small" },
+          { id: "codestral-latest", label: "Codestral" },
+          { id: "pixtral-large-latest", label: "Pixtral Large" },
+        ],
+      };
+      return ldModels[ldProvider] || ldModels.anthropic;
+    }
     default:
       return [];
   }
@@ -1496,6 +1557,11 @@ 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": {
+      if (config.langdockApiModel) return config.langdockApiModel;
+      const defaults = { anthropic: "claude-sonnet-4-6", openai: "gpt-4.1", google: "gemini-2.5-pro", mistral: "mistral-large-latest" };
+      return defaults[config.langdockProvider || "anthropic"] || "claude-sonnet-4-6";
+    }
     default: return null;
   }
 }
@@ -1558,9 +1624,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();
   }
 });