vibespot 1.7.7 → 1.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vibespot",
-  "version": "1.7.7",
-  "description": "AI-powered HubSpot CMS landing page builder \u2014 vibe coding & React converter",
+  "version": "1.8.0",
+  "description": "AI-powered HubSpot CMS landing page builder — vibe coding & React converter",
   "type": "module",
   "bin": {
     "vibespot": "bin/vibespot.mjs"
@@ -11,12 +11,15 @@
     "dist",
     "bin",
     "assets",
+    "!assets/readme/**",
     "ui",
+    "!ui/docs/screenshots/**",
     "starters"
   ],
   "scripts": {
     "dev": "tsx src/index.ts",
-    "build": "tsup",
+    "build": "npm run whatsnew:gen && tsup",
+    "whatsnew:gen": "tsx scripts/gen-whats-new.ts",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -27,7 +30,6 @@
     "prompts:seed": "tsx scripts/sync-prompts.ts --from-local",
     "prompts:push": "tsx scripts/sync-prompts.ts --push",
     "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"
@@ -55,6 +57,7 @@
     "@types/busboy": "^1.5.4",
     "@types/node": "^25.6.0",
     "@types/ws": "^8.18.1",
+    "jsdom": "^29.1.1",
     "tsup": "^8.4.0",
     "tsx": "^4.19.0",
     "typescript": "^6.0.3",

package/ui/chat.js

@@ -12,6 +12,10 @@ let isStreaming = false;
 // which a new message barges in to cancel-and-replan (VIB-1880). False when
 // parked at a checkpoint gate or running single-call mode.
 let agenticRunning = false;
+// True while a checkpoint gate card is parked awaiting the user's decision.
+// finishStreaming() clears isStreaming at the gate, so this flag is what
+// actually locks the composer (VIB-1898).
+let checkpointGateActive = false;
 // Softened barge-in (VIB-1876): a message sent during an active build is QUEUED
 // by default and dispatched when the build finishes. The queued chip carries an
 // "Interrupt now" button that triggers the old cancel-and-replan barge-in.
@@ -750,6 +754,9 @@ function handleWsMessage(msg) {
       resetPipelineState();
       appendAssistantError(msg.message);
       setStatus("Error");
+      // The run this message was queued behind is over — dispatch it rather
+      // than stranding the chip forever (VIB-1898).
+      flushQueuedMessage();
       break;
 
     case "pong":
@@ -1785,6 +1792,10 @@ async function sendMessage(text, opts = {}) {
   const hasFiles = pendingFiles.length > 0;
   if (!ws || ws.readyState !== WebSocket.OPEN) return;
   if (!text.trim() && !hasFiles) return;
+  // A parked checkpoint gate must be resolved through its card. Only the send
+  // buttons were locked before — Enter still reached here (the streaming flags
+  // are reset at the gate) and started a second run mid-park (VIB-1898).
+  if (checkpointGateActive) return;
   // Block sends while busy — EXCEPT during an active agentic build. There, a new
   // message is QUEUED by default and runs when the build finishes (VIB-1876);
   // an explicit Interrupt (opts.interrupt) triggers the cancel-and-replan
@@ -2078,6 +2089,9 @@ function interruptWithQueued() {
 // Dispatch the queued message once the current build has finished.
 function flushQueuedMessage() {
   if (!queuedMessage) return;
+  // A parked gate blocks sendMessage — keep the message queued; the gate's
+  // resolution path flushes again (VIB-1898).
+  if (checkpointGateActive) return;
   const { text, opts } = queuedMessage;
   clearQueuedMessage();
   // Defer so the just-finished run's UI settles before the next one starts.
@@ -2122,6 +2136,7 @@ function supersedeCurrentRun() {
     }
   }
   removeCheckpointCard();
+  checkpointGateActive = false;
   isStreaming = false;
   agenticRunning = false;
   streamingMsgEl = null;
@@ -2257,13 +2272,7 @@ function renderMarkdown(text) {
 // Helpers
 // ---------------------------------------------------------------------------
 
-function escapeHtml(str) {
-  return str
-    .replace(/&/g, "&")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;");
-}
+// escapeHtml comes from the shared ui/escape-html.js (VIB-1902).
 
 function scrollToBottom() {
   if (scrollScheduled) return;
@@ -2540,13 +2549,16 @@ function handleCheckpointRequested(msg) {
   messagesEl.appendChild(checkpointCardEl);
   scrollToBottom();
 
-  // Hold the send buttons until the gate is resolved.
+  // Hold the composer until the gate is resolved — buttons AND the Enter path
+  // through sendMessage (VIB-1898).
+  checkpointGateActive = true;
   setSendDisabled(true);
   setStatus("Awaiting your call");
 }
 
 function handleCheckpointCancelled() {
   removeCheckpointCard();
+  checkpointGateActive = false;
   setSendDisabled(false);
   appendSystemMessage("Cancelled — nothing was built.");
   flushQueuedMessage();
@@ -2554,6 +2566,7 @@ function handleCheckpointCancelled() {
 
 function resolveCheckpoint(action, note, extra) {
   if (!ws || ws.readyState !== WebSocket.OPEN) return;
+  checkpointGateActive = false;
   // Leave the decision in the transcript (card → one-line record), not an empty
   // bubble (VIB-1876).
   finalizeCheckpointCard(action, note, extra);

package/ui/dashboard.js

@@ -78,9 +78,16 @@ function hideDashboard() {
 // ---------------------------------------------------------------------------
 
 async function refreshDashboard() {
+  // Guard against a stale in-flight response rendering after the user
+  // switched to another theme (or left the dashboard) mid-fetch.
+  const themeAtStart = currentDashboardTheme;
+  const sessionAtStart = currentDashboardSessionId;
   try {
     const res = await fetch("/api/dashboard");
     const data = await res.json();
+    if (currentDashboardTheme !== themeAtStart || currentDashboardSessionId !== sessionAtStart) {
+      return;
+    }
     if (data.error) {
       console.warn("Dashboard load error:", data.error);
       return;
@@ -673,7 +680,9 @@ document.getElementById("dashboard-brand-assets")?.addEventListener("change", (e
   if (e.target.type !== "file") return;
   const card = e.target.closest(".brand-asset-card");
   if (!card || !e.target.files[0]) return;
-  handleBrandFileSelected(card.dataset.asset, e.target.files[0]);
+  const file = e.target.files[0];
+  e.target.value = ""; // allow re-selecting the same file after an error
+  handleBrandFileSelected(card.dataset.asset, file);
 });
 
 // ---------------------------------------------------------------------------
@@ -785,27 +794,43 @@ function updateBrandPreview() {
   const logoImg = document.getElementById("brand-preview-logo");
   const logoPlaceholder = document.getElementById("brand-preview-logo-placeholder");
   if (logoImg && logoPlaceholder) {
-    if (logoUrl) {
-      logoImg.src = logoUrl;
-      logoImg.hidden = false;
-      logoPlaceholder.hidden = true;
+    const safeLogoUrl = logoUrl ? safeImageUrl(logoUrl) : null;
+    if (safeLogoUrl) {
+      // Attach handlers before setting src so a fast (cached) result can't
+      // race past them and wedge the preview in a stale state.
       logoImg.onerror = () => {
         logoImg.hidden = true;
+        logoImg.removeAttribute("src");
         logoPlaceholder.hidden = false;
         logoPlaceholder.textContent = "Bad URL";
       };
       logoImg.onload = () => {
+        logoImg.hidden = false;
+        logoPlaceholder.hidden = true;
         logoPlaceholder.textContent = "No logo";
       };
+      logoImg.src = safeLogoUrl;
+      logoImg.hidden = false;
+      logoPlaceholder.hidden = true;
     } else {
       logoImg.hidden = true;
       logoImg.removeAttribute("src");
       logoPlaceholder.hidden = false;
-      logoPlaceholder.textContent = "No logo";
+      logoPlaceholder.textContent = logoUrl ? "Bad URL" : "No logo";
     }
   }
 }
 
+// Only http(s) URLs (or paths that resolve to them) may reach img.src —
+// blocks javascript:, data:, file: etc. from the free-text logo field.
+function safeImageUrl(url) {
+  try {
+    const parsed = new URL(url, window.location.href);
+    if (parsed.protocol === "http:" || parsed.protocol === "https:") return parsed.href;
+  } catch { /* unparseable */ }
+  return null;
+}
+
 for (const id of [
   "bk-hex-primary", "bk-hex-secondary", "bk-hex-accent",
   "bk-color-primary", "bk-color-secondary", "bk-color-accent",
@@ -1026,15 +1051,31 @@ async function uploadBrandAsset(type) {
   fileInput.click();
 }
 
+// Brand assets are prose fed into AI prompts — 1 MB of markdown is already
+// far beyond useful; anything bigger is a mis-picked file.
+const MAX_BRAND_ASSET_BYTES = 1024 * 1024;
+
 async function handleBrandFileSelected(type, file) {
-  const content = await file.text();
+  if (file.size > MAX_BRAND_ASSET_BYTES) {
+    await vibeAlert(
+      `File is too large (${(file.size / (1024 * 1024)).toFixed(1)} MB). Brand assets are text files up to 1 MB.`,
+      "Error",
+    );
+    return;
+  }
+  if (!/\.(md|markdown|txt)$/i.test(file.name || "")) {
+    await vibeAlert("Only .md and .txt files are supported.", "Error");
+    return;
+  }
 
   try {
-    const res = await fetch("/api/brand-assets", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ type, content }),
-    });
+    // Multipart keeps the file out of a JSON string (no UTF-16/binary
+    // mangling, no full-file JSON.stringify); the server enforces the same
+    // size cap and rejects non-text content.
+    const form = new FormData();
+    form.append("type", type);
+    form.append("file", file, file.name);
+    const res = await fetch("/api/brand-assets", { method: "POST", body: form });
     const data = await res.json();
     if (data.error) {
       await vibeAlert(data.error, "Error");

package/ui/docs/index.html

@@ -372,9 +372,14 @@ vibespot</code></pre>
       <tr><td><code>langfusePublicKey</code></td><td>string</td><td>Langfuse public key (<code>pk-lf-</code>)</td></tr>
       <tr><td><code>langfuseSecretKey</code></td><td>string</td><td>Langfuse secret key (<code>sk-lf-</code>)</td></tr>
       <tr><td><code>langfuseBaseUrl</code></td><td>string</td><td>Langfuse ingestion endpoint (default: <code>https://cloud.langfuse.com</code>)</td></tr>
+      <tr><td><code>lastSeenVersion</code></td><td>string</td><td>The version whose release notes you last dismissed in the <a href="#whats-new">What's new</a> dialog. Set automatically on dismiss; the dialog reappears when you upgrade to a newer version.</td></tr>
     </tbody>
   </table>
 
+  <h3 id="whats-new">What's new dialog</h3>
+  <p>The first time you open the builder after upgrading, a dialog shows the highlights of the new version with a link to the full changelog. Dismiss it &mdash; with the <strong>&times;</strong>, <strong>Got it</strong>, a click outside, or <kbd>Esc</kbd> &mdash; and it stays hidden until the next release. One card per version, never a repeat nag.</p>
+  <p>The highlights are pulled straight from <a href="https://github.com/borismichel/vibespot/blob/main/CHANGELOG.md"><code>CHANGELOG.md</code></a> at build time, so every release shows its own notes. Your dismissal is remembered per machine via <code>lastSeenVersion</code> in <code>~/.vibespot/config.json</code>.</p>
+
   <h3 id="env-vars">Environment Variables</h3>
   <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>
@@ -394,6 +399,10 @@ vibespot</code></pre>
       <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>
+      <tr><td><code>VIBESPOT_HOST</code></td><td>Bind address (default: <code>127.0.0.1</code>, loopback only). Set <code>0.0.0.0</code> to reach vibeSpot from another device &mdash; a non-loopback bind requires the access token printed at boot (see "Access from another device" in the README)</td></tr>
+      <tr><td><code>VIBESPOT_AUTH_TOKEN</code></td><td>Pin the shared-secret access token used on non-loopback binds (otherwise a fresh one is generated at boot and printed in the startup URL)</td></tr>
+      <tr><td><code>VIBESPOT_DISABLE_AUTH</code></td><td>Set <code>1</code> to disable the auth gate. Only for deployments behind their own authenticating proxy; on a non-loopback bind this additionally requires <code>VIBESPOT_TRUST_PROXY=1</code></td></tr>
+      <tr><td><code>VIBESPOT_TRUST_PROXY</code></td><td>Set <code>1</code> to acknowledge that an authenticating reverse proxy is the sole ingress, allowing <code>VIBESPOT_DISABLE_AUTH=1</code> on a non-loopback bind</td></tr>
       <tr><td><code>LANGFUSE_ENABLED</code></td><td>Set <code>true</code> to send <a href="#langfuse">Langfuse traces</a>. Required &mdash; keys alone don't enable it.</td></tr>
       <tr><td><code>LANGFUSE_PUBLIC_KEY</code></td><td>Langfuse public key (<code>pk-lf-</code>)</td></tr>
       <tr><td><code>LANGFUSE_SECRET_KEY</code></td><td>Langfuse secret key (<code>sk-lf-</code>)</td></tr>
@@ -988,7 +997,7 @@ testimonial carousel, and a minimal footer with social links.</code></pre>
   <p>Each card also shows the <strong>estimated cost of the build it gates</strong>, computed from spend-so-far via the per-page <a href="#observability">cost tracker</a> &mdash; so you know what Approve will cost before you click it. (CLI engines report no usage, so the estimate is omitted for them.)</p>
   <div class="doc-callout doc-callout--tip">
     <div class="doc-callout__label">&#128268; Crash-safe by design</div>
-    <p>A parked checkpoint isn't a paused, open promise &mdash; the pipeline <em>returns</em> at the gate and your resolution re-enters it via a resume token. If the server restarts while a gate is open, the run is simply dropped and you re-send your prompt, rather than leaving a hung generation behind.</p>
+    <p>A parked checkpoint isn't a paused, open promise &mdash; the pipeline <em>returns</em> at the gate and your resolution re-enters it via a resume token. The resume state is persisted with the session, so an open gate even survives a server restart: reopen the theme and the parked card is still there &mdash; approve, steer, or skip it and the run continues where it left off.</p>
   </div>
 
   <h3 id="checkpoints-oneshot">One-Shot Escape Hatch</h3>

package/ui/email-preview.js

@@ -38,11 +38,7 @@
     }
   }
 
-  function escapeHtml(str) {
-    var div = document.createElement("div");
-    div.textContent = str;
-    return div.innerHTML;
-  }
+  // escapeHtml comes from the shared ui/escape-html.js (VIB-1902).
 
   function openEmailPreview() {
     overlay.classList.remove("hidden");

package/ui/escape-html.js

@@ -0,0 +1,14 @@
+/**
+ * Shared HTML escaper (VIB-1902). Loaded before every script that
+ * interpolates untrusted strings into innerHTML — chat.js, plan.js and
+ * email-preview.js previously each carried their own copy (the
+ * email-preview one didn't escape quotes, so it was unsafe in attribute
+ * context). One definition, attribute-safe, used everywhere.
+ */
+function escapeHtml(str) {
+  return String(str)
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}

package/ui/field-editor.js

@@ -39,7 +39,9 @@ async function openFieldEditor(moduleName) {
 }
 
 function closeFieldEditor() {
-  if (updateTimer) { clearTimeout(updateTimer); updateTimer = null; }
+  // Fire (not drop) any debounced edit still pending — closing the editor
+  // right after typing must not lose the change (VIB-1898).
+  flushPendingFieldSaves();
   currentEditModule = null;
   if (typeof showModuleListView === "function") {
     showModuleListView();
@@ -281,18 +283,10 @@ function createFieldInput(field, moduleName, fullPath) {
 // Update field and refresh preview
 // ---------------------------------------------------------------------------
 
-let updateTimer = null;
-
 function updateField(moduleName, fieldPath, value) {
-  // Debounce updates
-  clearTimeout(updateTimer);
-  updateTimer = setTimeout(() => {
-    fetch("/api/field", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ moduleName, fieldPath, value }),
-    }).then(() => refreshPreview());
-  }, 300);
+  // Debounced per field via the shared save module (field-save.js) — editing
+  // a second field no longer cancels the first field's save (VIB-1898).
+  saveFieldDebounced(moduleName, fieldPath, value);
 }
 
 // ---------------------------------------------------------------------------

package/ui/field-save.js

@@ -0,0 +1,82 @@
+/**
+ * Unified /api/field save path (VIB-1898).
+ *
+ * All three field-editing surfaces persist through this module — the field
+ * editor sidebar (field-editor.js), inline interact-mode edits
+ * (inline-edit.js) and the section-controls commits (section-controls.js).
+ * The debounce is keyed PER FIELD, so editing a second field never cancels
+ * the first field's pending save, and saves to the same field are chained so
+ * an earlier POST can't land after a later one.
+ */
+
+/** key -> { timer, moduleName, fieldPath, value, opts } */
+const fieldSavePending = new Map();
+/** key -> tail of that field's in-flight POST chain */
+const fieldSaveChains = new Map();
+const FIELD_SAVE_DEBOUNCE_MS = 300;
+
+function fieldSaveKey(moduleName, fieldPath) {
+  return `${moduleName}\u0000${fieldPath}`;
+}
+
+/**
+ * Save one field value now.
+ *
+ * @param {Object} [opts]
+ * @param {boolean} [opts.refresh=true] Refresh the preview after the POST.
+ * @returns {Promise<void>} resolves after the POST (and refresh) settle.
+ */
+function saveField(moduleName, fieldPath, value, opts = {}) {
+  const key = fieldSaveKey(moduleName, fieldPath);
+  // An immediate save supersedes any older debounced value for the field.
+  const pending = fieldSavePending.get(key);
+  if (pending) {
+    clearTimeout(pending.timer);
+    fieldSavePending.delete(key);
+  }
+  const tail = fieldSaveChains.get(key) || Promise.resolve();
+  const post = tail
+    .then(() =>
+      fetch("/api/field", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ moduleName, fieldPath, value }),
+      })
+    )
+    .then(() => {
+      if (opts.refresh !== false) refreshPreview();
+    })
+    .catch(() => {
+      /* field save failed — preview keeps its optimistic state */
+    });
+  fieldSaveChains.set(key, post);
+  post.then(() => {
+    if (fieldSaveChains.get(key) === post) fieldSaveChains.delete(key);
+  });
+  return post;
+}
+
+/**
+ * Debounced save, keyed per field — pending edits to OTHER fields are
+ * untouched. Same opts as saveField, plus opts.debounceMs.
+ */
+function saveFieldDebounced(moduleName, fieldPath, value, opts = {}) {
+  const key = fieldSaveKey(moduleName, fieldPath);
+  const prev = fieldSavePending.get(key);
+  if (prev) clearTimeout(prev.timer);
+  const entry = { moduleName, fieldPath, value, opts };
+  entry.timer = setTimeout(() => {
+    fieldSavePending.delete(key);
+    saveField(moduleName, fieldPath, value, opts);
+  }, opts.debounceMs ?? FIELD_SAVE_DEBOUNCE_MS);
+  fieldSavePending.set(key, entry);
+}
+
+/** Fire every pending debounced save immediately (e.g. the editor closes). */
+function flushPendingFieldSaves() {
+  for (const [key, entry] of Array.from(fieldSavePending)) {
+    clearTimeout(entry.timer);
+    fieldSavePending.delete(key);
+    saveField(entry.moduleName, entry.fieldPath, entry.value, entry.opts);
+  }
+}

package/ui/index.html

@@ -889,7 +889,7 @@
                   <button class="btn btn--danger btn--sm dashboard__module-preview-delete" id="dashboard-preview-delete" type="button">Delete module</button>
                   <button class="dashboard__module-preview-close" id="dashboard-preview-close" type="button" aria-label="Close preview">&times;</button>
                 </div>
-                <iframe class="dashboard__module-preview-frame" id="dashboard-preview-frame" sandbox="allow-scripts allow-same-origin" title="Module preview"></iframe>
+                <iframe class="dashboard__module-preview-frame" id="dashboard-preview-frame" sandbox="allow-scripts" title="Module preview"></iframe>
               </div>
             </section>
 
@@ -952,7 +952,7 @@
         </div>
         <div class="email-preview-panel__notes" id="email-preview-notes"></div>
         <div class="email-preview-panel__body">
-          <iframe class="email-preview-panel__frame" id="email-preview-frame" sandbox="allow-scripts allow-same-origin" title="Email client preview"></iframe>
+          <iframe class="email-preview-panel__frame" id="email-preview-frame" sandbox="allow-scripts" title="Email client preview"></iframe>
         </div>
       </div>
     </div>
@@ -997,8 +997,9 @@
   <script src="/vendor/marked.umd.js"></script>
   <script src="/vendor/codemirror-bundle.global.js"></script>
   <script src="/icons.js"></script>
+  <script src="/escape-html.js"></script>
   <script src="/dialog.js"></script>
-  <script src="/setup.js?v=111"></script>
+  <script src="/setup.js?v=112"></script>
   <script src="/dashboard.js"></script>
   <script src="/settings.js"></script>
   <script src="/upload-panel.js"></script>
@@ -1006,10 +1007,12 @@
   <script src="/chat.js?v=109"></script>
   <script src="/plan.js"></script>
   <script src="/preview.js"></script>
+  <script src="/field-save.js"></script>
   <script src="/inline-edit.js"></script>
   <script src="/field-editor.js"></script>
   <script src="/code-editor.js"></script>
   <script src="/email-preview.js"></script>
   <script src="/section-controls.js"></script>
+  <script src="/whats-new.js"></script>
 </body>
 </html>