vibespot 1.6.5 → 1.8.0

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>