vibespot 1.7.7 → 1.8.0

package/ui/setup.js

@@ -136,19 +136,27 @@ async function initSetup() {
     // Show "Continue where you left off" cards above the create options
     populateRecentProjects(info);
 
-    // Auto-select engine if available but not yet chosen
+    // Auto-select engine if available but not yet chosen. Guarded on its own:
+    // a transient failure here just leaves the "no engine" alert visible —
+    // it must not abort the rest of setup rendering.
     if (info.availableEngines && info.availableEngines.length > 0 && !info.activeEngine) {
       const engine = info.availableEngines[0];
-      await fetch("/api/settings/engine", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ engine }),
-      });
-      info.activeEngine = engine;
-      info.aiAvailable = true;
-      // Update statusbar
-      const statusEngine = document.getElementById("status-engine");
-      if (statusEngine) statusEngine.textContent = ENGINE_DISPLAY_NAMES[engine] || engine;
+      try {
+        const engineRes = await fetch("/api/settings/engine", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ engine }),
+        });
+        if (engineRes.ok) {
+          info.activeEngine = engine;
+          info.aiAvailable = true;
+          // Update statusbar
+          const statusEngine = document.getElementById("status-engine");
+          if (statusEngine) statusEngine.textContent = ENGINE_DISPLAY_NAMES[engine] || engine;
+        }
+      } catch (err) {
+        console.warn("[setup] engine auto-select failed", err);
+      }
     }
 
     // Show environment alerts
@@ -1069,25 +1077,48 @@ async function handleCliAction(engineId, action, btn) {
     const data = await res.json();
     if (data.jobId) {
       // Poll until complete
-      await pollJob(data.jobId);
+      await pollJobUntilDone(data.jobId);
     }
     // Refresh walkthrough to show updated status
     showWalkthrough();
-  } catch {
+  } catch (err) {
     btn.disabled = false;
     btn.textContent = origText;
+    await vibeAlert((action === "install" ? "Install failed: " : "Sign-in failed: ") + (err.message || err), "Error");
   }
 }
 
-async function pollJob(jobId) {
-  for (let i = 0; i < 60; i++) {
-    await new Promise((r) => setTimeout(r, 2000));
+// Poll a background job until it finishes. Resolves with the job payload on
+// success; throws on failure, on a vanished job (404 — the server restarted
+// or GC'd it, so it will never complete), and on timeout — so callers can't
+// spin forever on a dead job. Also used by upload-panel.js.
+// NOT named pollJob: settings.js declares a legacy callback-style pollJob in
+// the same global scope and loads later, so that name gets shadowed (VIB-1931).
+async function pollJobUntilDone(jobId, { timeoutMs = 5 * 60 * 1000, intervalMs = 2000 } = {}) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    await new Promise((r) => setTimeout(r, intervalMs));
+    let res;
     try {
-      const res = await fetch("/api/settings/job/" + jobId);
-      const data = await res.json();
-      if (data.status === "completed" || data.status === "failed") return;
-    } catch { return; }
+      res = await fetch("/api/settings/job/" + jobId);
+    } catch {
+      continue; // transient network error — keep polling until the deadline
+    }
+    if (res.status === 404) {
+      throw new Error("The background job was lost (server restarted?). Please try again.");
+    }
+    let data;
+    try {
+      data = await res.json();
+    } catch {
+      continue;
+    }
+    if (data.status === "completed") return data;
+    if (data.status === "failed") {
+      throw new Error(data.output ? String(data.output).slice(-500) : "The background job failed.");
+    }
   }
+  throw new Error("Timed out waiting for the job to finish. Please try again.");
 }
 
 // ---------------------------------------------------------------------------
@@ -2123,6 +2154,17 @@ document.getElementById("figma-extract-btn")?.addEventListener("click", async ()
       body: JSON.stringify({ url }),
     });
 
+    // Non-streaming failure (auth gate, 4xx/5xx JSON error) — surface it
+    // instead of letting getReader() throw an opaque TypeError.
+    if (!res.ok || !res.body) {
+      let msg = "Extraction failed (" + res.status + ")";
+      try {
+        const errData = await res.json();
+        if (errData.error) msg = errData.error;
+      } catch { /* non-JSON error body */ }
+      throw new Error(msg);
+    }
+
     const reader = res.body.getReader();
     const decoder = new TextDecoder();
     let buffer = "";
@@ -2280,6 +2322,17 @@ async function startFigmaImport(extractionId, themeName, useAssets = true) {
       body: JSON.stringify({ extractionId, themeName, useAssets }),
     });
 
+    // Non-streaming failure (auth gate, 4xx/5xx JSON error) — surface it
+    // instead of letting getReader() throw an opaque TypeError.
+    if (!res.ok || !res.body) {
+      let msg = "Conversion failed (" + res.status + ")";
+      try {
+        const errData = await res.json();
+        if (errData.error) msg = errData.error;
+      } catch { /* non-JSON error body */ }
+      throw new Error(msg);
+    }
+
     const reader = res.body.getReader();
     const decoder = new TextDecoder();
     let buffer = "";

package/ui/styles.css

@@ -8463,3 +8463,180 @@ body { display: flex; }
   margin-top: var(--space-1);
 }
 .brand-intake__top-actions { margin-top: var(--space-2); }
+
+/* ===========================================================================
+   "What's new" release dialog (VIB-1886)
+   One-time post-upgrade modal. Reuses overlay/dialog tokens — no one-off values.
+   =========================================================================== */
+.whatsnew-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay-bg);
+  z-index: var(--z-confirm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-5);
+  animation: fadeIn var(--duration-fast) var(--ease-default);
+}
+
+.whatsnew-dialog {
+  position: relative;
+  background: var(--bg-panel-solid);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  width: 460px;
+  max-width: 100%;
+  max-height: calc(100vh - var(--space-8));
+  overflow-y: auto;
+  box-shadow: var(--shadow-xl);
+  animation: whatsnewIn var(--duration-slow) var(--ease-spring);
+}
+
+@keyframes whatsnewIn {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to   { opacity: 1; transform: none; }
+}
+
+.whatsnew__close {
+  position: absolute;
+  top: var(--space-4);
+  right: var(--space-4);
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--ease-default),
+              background var(--duration-fast) var(--ease-default);
+}
+.whatsnew__close:hover { color: var(--text); background: var(--bg-hover); }
+.whatsnew__close:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
+
+/* Brand lockup — accent star on its dark container (brand rule: container intact) */
+.whatsnew__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-5);
+}
+.whatsnew__logo {
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.whatsnew__wordmark {
+  font-family: var(--font-display);
+  font-size: var(--text-lg);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-tight);
+  color: var(--text);
+}
+.whatsnew__version {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--tracking-wide);
+  color: var(--accent);
+  background: var(--accent-tint);
+  border: 1px solid var(--accent-dim);
+  border-radius: var(--radius-pill);
+  padding: 2px var(--space-2);
+}
+
+.whatsnew__title {
+  font-family: var(--font-display);
+  font-size: var(--text-2xl);
+  font-weight: var(--weight-bold);
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
+  color: var(--text);
+  margin: 0 0 var(--space-1);
+}
+.whatsnew__date {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  margin: 0 0 var(--space-5);
+}
+
+.whatsnew__list {
+  list-style: none;
+  margin: 0 0 var(--space-6);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.whatsnew__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+}
+.whatsnew__marker {
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-tint);
+  border-radius: var(--radius-sm);
+}
+.whatsnew__marker svg { width: 16px; height: 16px; }
+.whatsnew__item-text { display: flex; flex-direction: column; gap: 2px; }
+.whatsnew__item-title {
+  font-size: var(--text-md);
+  font-weight: var(--weight-semibold);
+  color: var(--text);
+  line-height: var(--leading-tight);
+}
+.whatsnew__item-body {
+  font-size: var(--text-base);
+  line-height: var(--leading-relaxed);
+  color: var(--text-dim);
+}
+
+.whatsnew__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-3);
+}
+.whatsnew__actions .btn { text-decoration: none; }
+
+/* Narrow widths — modal becomes a bottom-anchored sheet, actions stack full-width */
+@media (max-width: 520px) {
+  .whatsnew-overlay { align-items: flex-end; padding: 0; }
+  .whatsnew-dialog {
+    width: 100%;
+    max-width: 100%;
+    max-height: 90vh;
+    padding: var(--space-5);
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    border-bottom: none;
+    animation: whatsnewSheetIn var(--duration-slow) var(--ease-out);
+  }
+  .whatsnew__title { font-size: var(--text-xl); }
+  .whatsnew__actions { flex-direction: column-reverse; }
+  .whatsnew__actions .btn { width: 100%; }
+}
+
+@keyframes whatsnewSheetIn {
+  from { opacity: 0; transform: translateY(100%); }
+  to   { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .whatsnew-overlay,
+  .whatsnew-dialog { animation: none; }
+}

package/ui/upload-panel.js

@@ -116,16 +116,15 @@ function showHubSpotSetupDialog(mode) {
           });
           const data = await res.json();
           if (data.jobId) {
-            // Poll until done
-            for (let i = 0; i < 60; i++) {
-              await new Promise((r) => setTimeout(r, 2000));
-              const jr = await fetch("/api/settings/job/" + data.jobId).then((r) => r.json());
-              if (jr.status === "completed") { close(true); return; }
-              if (jr.status === "failed") { close(false); return; }
-            }
+            // pollJobUntilDone (setup.js) resolves on success and throws on
+            // failure / lost job (404) / timeout.
+            await pollJobUntilDone(data.jobId);
+            close(true);
+            return;
           }
           close(false);
-        } catch {
+        } catch (err) {
+          await vibeAlert("Install failed: " + (err.message || err), "Error");
           close(false);
         }
       });

package/ui/whats-new.js

@@ -0,0 +1,249 @@
+/**
+ * "What's new" release dialog — shown once after a version upgrade.
+ *
+ * SCAFFOLD (VIB-1886): UX + clickable demo only. Production gating
+ * (lastSeenVersion read/write, server route) is a follow-up owned by CTO.
+ *
+ * Mount points:
+ *   - Production seam:  maybeShowWhatsNew({ currentVersion, lastSeenVersion, onDismiss })
+ *   - Demo / screenshots: add ?whatsnew=1 to the URL (search OR hash query) and
+ *     this file self-renders the modal over whatever view is loaded.
+ *
+ * Reuses the existing overlay pattern (see ui/dialog.js) and the design tokens
+ * in ui/styles.css. No new visual language, no one-off values.
+ */
+
+// HTML-escape helper — guard for load order (dialog.js usually defines `esc`).
+if (typeof esc === "undefined") {
+  // eslint-disable-next-line no-var
+  var _wnEscMap = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+  // eslint-disable-next-line no-var
+  var esc = function (str) {
+    return String(str).replace(/[&<>"']/g, function (c) { return _wnEscMap[c]; });
+  };
+}
+
+/**
+ * Release content. In production this is sourced from the current CHANGELOG.md
+ * section (CTO follow-up). For the scaffold it's the real, condensed 1.7.x story
+ * (the 1.7.1–1.7.7 entries shipped together on 2026-06-27 — checkpoints + softened
+ * barge-in). Copy run through the humanify standard: verbs lead, no buzzwords.
+ */
+const WHATS_NEW = {
+  version: "1.7.7",
+  date: "June 27, 2026",
+  changelogUrl: "https://github.com/borismichel/vibespot/blob/main/CHANGELOG.md",
+  highlights: [
+    {
+      title: "Checkpoints survive interruptions",
+      body: "Refresh the tab, lock your iPad, or restart the server. An open design, structure, or brand checkpoint comes back exactly where you left it instead of expiring.",
+    },
+    {
+      title: "Mid-build messages wait their turn",
+      body: "Type while a page is generating and your message queues as “runs next” instead of cancelling the build. Hit Interrupt now when you want to change course.",
+    },
+    {
+      title: "Every decision is on the record",
+      body: "Approving a checkpoint leaves a line in the chat: the palette and fonts you chose, the sections you kept. You can see what you signed off on.",
+    },
+  ],
+};
+
+// Four-pointed brand star (same mark as the topbar logo), accent-gradient fill.
+const _WN_STAR = `
+  <svg viewBox="0 0 512 512" width="22" height="22" aria-hidden="true">
+    <defs>
+      <linearGradient id="wn-star-grad" x1="0" y1="0" x2="1" y2="1">
+        <stop offset="0" stop-color="#e8613a"/>
+        <stop offset="1" stop-color="#f2825f"/>
+      </linearGradient>
+    </defs>
+    <path d="M256 76 Q280 220 436 256 Q280 292 256 436 Q232 292 76 256 Q232 220 256 76 Z" fill="url(#wn-star-grad)"/>
+  </svg>`;
+
+let _wnOpen = false;
+
+/**
+ * Render the "what's new" modal.
+ * @param {object} [opts]
+ * @param {object} [opts.content] — release content (defaults to WHATS_NEW)
+ * @param {Function} [opts.onDismiss] — called when the user dismisses the modal
+ * @returns {Promise<void>} resolves on dismiss
+ */
+function showWhatsNew(opts) {
+  opts = opts || {};
+  const content = opts.content || WHATS_NEW;
+  if (_wnOpen) return Promise.resolve();
+  _wnOpen = true;
+
+  return new Promise((resolve) => {
+    const lastFocused = document.activeElement;
+
+    const overlay = document.createElement("div");
+    overlay.className = "whatsnew-overlay";
+
+    const bullets = content.highlights.map((h) => `
+      <li class="whatsnew__item">
+        <span class="whatsnew__marker" aria-hidden="true">${_WN_STAR}</span>
+        <div class="whatsnew__item-text">
+          <span class="whatsnew__item-title">${esc(h.title)}</span>
+          <span class="whatsnew__item-body">${esc(h.body)}</span>
+        </div>
+      </li>`).join("");
+
+    overlay.innerHTML = `
+      <div class="whatsnew-dialog" role="dialog" aria-modal="true"
+           aria-labelledby="whatsnew-title" aria-describedby="whatsnew-desc">
+        <button class="whatsnew__close" type="button" data-action="dismiss" aria-label="Close">
+          <svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+               stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+
+        <div class="whatsnew__brand">
+          <span class="whatsnew__logo">${_WN_STAR}</span>
+          <span class="whatsnew__wordmark">vibeSpot</span>
+          <span class="whatsnew__version">v${esc(content.version)}</span>
+        </div>
+
+        <h2 class="whatsnew__title" id="whatsnew-title">What’s new in vibeSpot ${esc(content.version)}</h2>
+        <p class="whatsnew__date" id="whatsnew-desc">Released ${esc(content.date)}</p>
+
+        <ul class="whatsnew__list">${bullets}</ul>
+
+        <div class="whatsnew__actions">
+          <button class="btn btn--secondary" type="button" data-action="dismiss">Got it</button>
+          <a class="btn btn--primary" href="${esc(content.changelogUrl)}"
+             target="_blank" rel="noopener noreferrer" data-action="changelog">
+            Read the full changelog
+          </a>
+        </div>
+      </div>`;
+
+    document.body.appendChild(overlay);
+
+    const dialog = overlay.querySelector(".whatsnew-dialog");
+    const focusables = dialog.querySelectorAll('button, a[href], [tabindex]:not([tabindex="-1"])');
+
+    const close = () => {
+      if (!_wnOpen) return;
+      _wnOpen = false;
+      document.removeEventListener("keydown", onKey);
+      overlay.remove();
+      if (typeof opts.onDismiss === "function") opts.onDismiss();
+      if (lastFocused && typeof lastFocused.focus === "function") lastFocused.focus();
+      resolve();
+    };
+
+    // Dismiss affordances: ✕, "Got it", backdrop click. The changelog link
+    // opens in a new tab and also counts as "seen" so it never nags again.
+    overlay.addEventListener("click", (e) => {
+      const action = e.target.closest("[data-action]");
+      if (e.target === overlay) return close();           // backdrop
+      if (!action) return;
+      if (action.dataset.action === "changelog") { close(); return; } // let the link open
+      e.preventDefault();
+      close();
+    });
+
+    function onKey(e) {
+      if (e.key === "Escape") { e.preventDefault(); return close(); }
+      if (e.key === "Tab" && focusables.length) {          // simple focus trap
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+        else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+      }
+    }
+    document.addEventListener("keydown", onKey);
+
+    // Focus the primary action so keyboard users land inside the dialog.
+    setTimeout(() => {
+      const primary = dialog.querySelector('[data-action="changelog"]');
+      if (primary) primary.focus();
+    }, 50);
+  });
+}
+
+/**
+ * Production seam (CTO follow-up wires this on web-UI load).
+ * Shows the modal once per release: when the installed version differs from the
+ * version this user last dismissed. On dismiss, persist lastSeenVersion.
+ *
+ * @param {object} args
+ * @param {string} args.currentVersion   — package.json version
+ * @param {string} [args.lastSeenVersion]— from ~/.vibespot/config.json
+ * @param {Function} [args.onDismiss]    — persist callback (write lastSeenVersion)
+ * @param {object} [args.content]        — release content from CHANGELOG.md
+ * @returns {boolean} whether the modal was shown
+ */
+function maybeShowWhatsNew(args) {
+  args = args || {};
+  if (!args.currentVersion) return false;
+  if (args.currentVersion === args.lastSeenVersion) return false;
+  showWhatsNew({
+    content: args.content,
+    onDismiss: () => {
+      if (typeof args.onDismiss === "function") args.onDismiss(args.currentVersion);
+    },
+  });
+  return true;
+}
+
+// --- Demo trigger (scaffold only) ------------------------------------------
+// ?whatsnew=1 in the query string OR after the hash (e.g. #/app/foo?whatsnew=1)
+// renders the modal so it can be captured standalone for screenshots.
+function _wnDemoRequested() {
+  const inSearch = new URLSearchParams(window.location.search).get("whatsnew") === "1";
+  const hash = window.location.hash || "";
+  const qIndex = hash.indexOf("?");
+  const inHash = qIndex !== -1 &&
+    new URLSearchParams(hash.slice(qIndex + 1)).get("whatsnew") === "1";
+  return inSearch || inHash;
+}
+
+function _wnInitDemo() {
+  if (_wnDemoRequested()) {
+    // Small delay so the builder chrome paints first (modal sits over it).
+    setTimeout(() => showWhatsNew(), 400);
+  }
+}
+
+// --- Production bootstrap (VIB-1885) ----------------------------------------
+// On launch, ask the server whether there's an undismissed release to show.
+// The server reads assets/whats-new.json (generated from CHANGELOG.md) and
+// gates on config.lastSeenVersion, so this surfaces once per upgrade. Dismissing
+// persists lastSeenVersion via POST /api/whats-new/dismiss so it never nags again.
+function _wnInitProd() {
+  if (_wnDemoRequested()) return; // demo path owns the modal
+  fetch("/api/whats-new")
+    .then((r) => (r.ok ? r.json() : null))
+    .then((data) => {
+      if (!data || !data.show || !data.content) return;
+      maybeShowWhatsNew({
+        currentVersion: data.content.version,
+        lastSeenVersion: null, // server already decided show=true
+        content: data.content,
+        onDismiss: (version) => {
+          fetch("/api/whats-new/dismiss", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ version }),
+          }).catch(() => {});
+        },
+      });
+    })
+    .catch(() => {}); // network/offline: silently skip — never block the app
+}
+
+function _wnInit() {
+  _wnInitDemo();
+  _wnInitProd();
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", _wnInit);
+} else {
+  _wnInit();
+}

package/assets/readme/00-hero-banner.svg

@@ -1,59 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 400" width="1600" height="400">
-  <defs>
-    <style>
-      @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400&amp;family=Space+Grotesk:wght@700&amp;display=swap');
-    </style>
-    <linearGradient id="star-grad" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#e8613a"/>
-      <stop offset="100%" stop-color="#f2825f"/>
-    </linearGradient>
-    <linearGradient id="bar-grad" x1="0" y1="0" x2="1" y2="0">
-      <stop offset="0%" stop-color="#e8613a"/>
-      <stop offset="100%" stop-color="#f2825f"/>
-    </linearGradient>
-    <radialGradient id="glow1" cx="75%" cy="10%" r="45%">
-      <stop offset="0%" stop-color="#e8613a" stop-opacity="0.08"/>
-      <stop offset="40%" stop-color="#e8613a" stop-opacity="0.02"/>
-      <stop offset="65%" stop-color="#e8613a" stop-opacity="0"/>
-    </radialGradient>
-    <radialGradient id="glow2" cx="20%" cy="95%" r="35%">
-      <stop offset="0%" stop-color="#e8613a" stop-opacity="0.06"/>
-      <stop offset="40%" stop-color="#e8613a" stop-opacity="0.01"/>
-      <stop offset="65%" stop-color="#e8613a" stop-opacity="0"/>
-    </radialGradient>
-  </defs>
-
-  <!-- Background -->
-  <rect width="1600" height="400" fill="#faf9f7"/>
-  <rect width="1600" height="400" fill="url(#glow1)"/>
-  <rect width="1600" height="400" fill="url(#glow2)"/>
-
-  <!-- Decorative stars -->
-  <g opacity="0.10"><path d="M214 69 C214.6 78.6,221.4 85.4,231 86 C221.4 86.6,214.6 93.4,214 103 C213.4 93.4,206.6 86.6,197 86 C206.6 85.4,213.4 78.6,214 69Z" fill="#e8613a"/></g>
-  <g opacity="0.07"><path d="M149 295 C149.4 301.4,153.6 305.6,160 306 C153.6 306.4,149.4 310.6,149 317 C148.6 310.6,144.4 306.4,138 306 C144.4 305.6,148.6 301.4,149 295Z" fill="#e8613a"/></g>
-  <g opacity="0.09"><path d="M1372 88 C1372.6 97,1378.6 103,1388 103.6 C1378.6 104.2,1372.6 110.2,1372 119.2 C1371.4 110.2,1365.4 104.2,1356 103.6 C1365.4 103,1371.4 97,1372 88Z" fill="#e8613a"/></g>
-  <g opacity="0.06"><path d="M1428 325 C1428.8 337,1437 345.2,1449 346 C1437 346.8,1428.8 355,1428 367 C1427.2 355,1419 346.8,1407 346 C1419 345.2,1427.2 337,1428 325Z" fill="#e8613a"/></g>
-  <g opacity="0.05"><path d="M371 175 C371.3 179.8,374.2 182.7,379 183 C374.2 183.3,371.3 186.2,371 191 C370.7 186.2,367.8 183.3,363 183 C367.8 182.7,370.7 179.8,371 175Z" fill="#e8613a"/></g>
-  <g opacity="0.07"><path d="M413 303 C413.4 310,418 314.6,425 315 C418 315.4,413.4 320,413 327 C412.6 320,408 315.4,401 315 C408 314.6,412.6 310,413 303Z" fill="#e8613a"/></g>
-  <g opacity="0.06"><path d="M1188 57 C1188.3 62.4,1191.6 65.7,1197 66 C1191.6 66.3,1188.3 69.6,1188 75 C1187.7 69.6,1184.4 66.3,1179 66 C1184.4 65.7,1187.7 62.4,1188 57Z" fill="#e8613a"/></g>
-  <g opacity="0.05"><path d="M1172 340 C1172.5 348,1177.8 353.3,1186 353.8 C1177.8 354.3,1172.5 359.6,1172 367.6 C1171.5 359.6,1166.2 354.3,1158 353.8 C1166.2 353.3,1171.5 348,1172 340Z" fill="#e8613a"/></g>
-  <g opacity="0.04"><path d="M1288 326 C1288.2 330,1290.6 332.4,1295 332.6 C1290.6 332.8,1288.2 335.2,1288 339.2 C1287.8 335.2,1285.4 332.8,1281 332.6 C1285.4 332.4,1287.8 330,1288 326Z" fill="#e8613a"/></g>
-  <g opacity="0.04"><path d="M533 138 C533.2 141.6,535.4 143.8,539 144 C535.4 144.2,533.2 146.4,533 150 C532.8 146.4,530.6 144.2,527 144 C530.6 143.8,532.8 141.6,533 138Z" fill="#e8613a"/></g>
-
-  <!-- Logo mark (dark container + star) -->
-  <g transform="translate(680, 128)">
-    <rect width="80" height="80" rx="18" fill="#0c0a09"/>
-    <g transform="translate(15, 15) scale(0.0977)">
-      <path d="M256 28 C260 140, 372 252, 484 256 C372 260, 260 372, 256 484 C252 372, 140 260, 28 256 C140 252, 252 140, 256 28Z" fill="url(#star-grad)"/>
-    </g>
-  </g>
-
-  <!-- Wordmark -->
-  <text x="784" y="183" font-family="'Space Grotesk', system-ui, -apple-system, sans-serif" font-weight="700" font-size="60" fill="#1a1715" letter-spacing="-1.8">vibeSpot</text>
-
-  <!-- Tagline -->
-  <text x="800" y="234" font-family="'DM Sans', system-ui, -apple-system, sans-serif" font-weight="400" font-size="21" fill="#78716c" text-anchor="middle" letter-spacing="0.2">Build HubSpot landing pages with AI</text>
-
-  <!-- Accent bar -->
-  <rect x="776" y="256" width="48" height="3" rx="1.5" fill="url(#bar-grad)" opacity="0.6"/>
-</svg>