vibespot 1.1.1 → 1.3.0

package/ui/marketplace.js

@@ -0,0 +1,218 @@
+/**
+ * Marketplace publication panel — runs the Marketplace check against the
+ * active theme, lets users browse findings, fix the auto-fixable ones, and
+ * edit the marketplace.json listing sidecar.
+ */
+
+async function openMarketplacePanel() {
+  const overlay = document.createElement("div");
+  overlay.className = "confirm-overlay marketplace-overlay";
+  overlay.innerHTML = `
+    <div class="confirm-dialog marketplace-dialog">
+      <div class="confirm-dialog__title">HubSpot Marketplace check</div>
+      <div class="marketplace-body" id="marketplace-body">
+        <p class="confirm-dialog__detail">Running check…</p>
+      </div>
+      <div class="confirm-dialog__actions">
+        <button class="btn btn--ghost" data-action="close">Close</button>
+        <button class="btn btn--ghost" data-action="edit">Edit listing</button>
+        <button class="btn btn--ghost" data-action="fix" disabled>Apply fixes</button>
+        <button class="btn btn--primary" data-action="recheck">Re-check</button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+
+  const body = overlay.querySelector("#marketplace-body");
+  const fixBtn = overlay.querySelector('[data-action="fix"]');
+  const editBtn = overlay.querySelector('[data-action="edit"]');
+  const recheckBtn = overlay.querySelector('[data-action="recheck"]');
+  const closeBtn = overlay.querySelector('[data-action="close"]');
+
+  let lastCategories = [];
+
+  async function refresh() {
+    body.innerHTML = `<p class="confirm-dialog__detail">Running check…</p>`;
+    try {
+      const res = await fetch("/api/marketplace/check");
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Check failed");
+      lastCategories = data.categories || [];
+      renderReport(body, data.report);
+      const autoFixable = (data.report.findings || []).some((f) => f.autoFixable);
+      fixBtn.disabled = !autoFixable;
+    } catch (err) {
+      body.innerHTML = `<p class="confirm-dialog__detail">${esc(err.message)}</p>`;
+    }
+  }
+
+  recheckBtn.addEventListener("click", refresh);
+  closeBtn.addEventListener("click", () => overlay.remove());
+  overlay.addEventListener("click", (e) => { if (e.target === overlay) overlay.remove(); });
+
+  fixBtn.addEventListener("click", async () => {
+    fixBtn.disabled = true;
+    try {
+      const res = await fetch("/api/marketplace/fix", { method: "POST" });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Fix failed");
+      renderReport(body, data.report, data.fix);
+      const stillFixable = (data.report.findings || []).some((f) => f.autoFixable);
+      fixBtn.disabled = !stillFixable;
+    } catch (err) {
+      await vibeAlert(err.message, "Fix failed");
+    }
+  });
+
+  editBtn.addEventListener("click", async () => {
+    try {
+      const res = await fetch("/api/marketplace/listing");
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Could not load listing");
+      lastCategories = data.categories || lastCategories;
+      const next = await openListingEditor(data.metadata, lastCategories);
+      if (!next) return;
+      const save = await fetch("/api/marketplace/listing", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(next),
+      });
+      const result = await save.json();
+      if (!save.ok) throw new Error(result.error || "Save failed");
+      await refresh();
+    } catch (err) {
+      await vibeAlert(err.message, "Listing");
+    }
+  });
+
+  refresh();
+}
+
+function renderReport(container, report, fix) {
+  if (!report) {
+    container.innerHTML = `<p class="confirm-dialog__detail">No report available.</p>`;
+    return;
+  }
+
+  const errors = report.findings.filter((f) => f.severity === "error");
+  const warnings = report.findings.filter((f) => f.severity === "warning");
+  const info = report.findings.filter((f) => f.severity === "info");
+
+  const summaryClass = report.passed ? "marketplace-summary--ok" : "marketplace-summary--fail";
+  const summaryText = report.passed
+    ? `Theme passes Marketplace checks.`
+    : `Theme is not yet ready.`;
+
+  let html = `
+    <div class="marketplace-summary ${summaryClass}">
+      <strong>${esc(summaryText)}</strong>
+      <div class="marketplace-summary__counts">
+        <span class="marketplace-pill marketplace-pill--error">${errors.length} errors</span>
+        <span class="marketplace-pill marketplace-pill--warn">${warnings.length} warnings</span>
+        <span class="marketplace-pill marketplace-pill--info">${info.length} notes</span>
+      </div>
+    </div>
+  `;
+
+  if (fix && (fix.applied?.length || fix.skipped?.length)) {
+    html += `<div class="marketplace-fix-result">`;
+    if (fix.applied?.length) {
+      html += `<strong>Applied:</strong><ul>${fix.applied.map((s) => `<li>${esc(s)}</li>`).join("")}</ul>`;
+    }
+    if (fix.skipped?.length) {
+      html += `<strong>Skipped:</strong><ul>${fix.skipped.map((s) => `<li>${esc(s)}</li>`).join("")}</ul>`;
+    }
+    html += `</div>`;
+  }
+
+  html += renderFindingGroup("Errors", errors);
+  html += renderFindingGroup("Warnings", warnings);
+  html += renderFindingGroup("Notes", info);
+
+  if (report.findings.length === 0) {
+    html += `<p class="confirm-dialog__detail">Nothing to flag — submit when ready.</p>`;
+  }
+
+  container.innerHTML = html;
+}
+
+function renderFindingGroup(title, findings) {
+  if (findings.length === 0) return "";
+  const items = findings.map((f) => `
+    <li class="marketplace-finding marketplace-finding--${f.severity}">
+      ${f.file ? `<code class="marketplace-finding__file">${esc(f.file)}</code>` : ""}
+      <span class="marketplace-finding__msg">${esc(f.message)}</span>
+      ${f.fix ? `<div class="marketplace-finding__fix">${esc(f.fix)}</div>` : ""}
+    </li>
+  `).join("");
+  return `<section class="marketplace-section"><h4>${esc(title)}</h4><ul class="marketplace-findings">${items}</ul></section>`;
+}
+
+function openListingEditor(existing, categories) {
+  const meta = existing || {};
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.className = "confirm-overlay";
+    const catOptions = (categories || []).map(
+      (c) => `<option value="${esc(c)}" ${c === meta.category ? "selected" : ""}>${esc(c)}</option>`
+    ).join("");
+    overlay.innerHTML = `
+      <div class="confirm-dialog marketplace-dialog">
+        <div class="confirm-dialog__title">Marketplace listing</div>
+        <form id="marketplace-listing-form" class="marketplace-listing-form">
+          <label>Category
+            <select name="category"><option value="">Select…</option>${catOptions}</select>
+          </label>
+          <label>Description
+            <textarea name="description" rows="3" placeholder="A 1–2 sentence summary for the Marketplace listing.">${esc(meta.description || "")}</textarea>
+          </label>
+          <label>Features (comma-separated, 2–5 items)
+            <input name="features" value="${esc((meta.features || []).join(", "))}" placeholder="Hero, Pricing, Testimonials, Footer" />
+          </label>
+          <label>Support URL
+            <input type="url" name="supportUrl" value="${esc(meta.supportUrl || "")}" placeholder="https://example.com/support" />
+          </label>
+          <label>Documentation URL (optional)
+            <input type="url" name="documentationUrl" value="${esc(meta.documentationUrl || "")}" placeholder="https://example.com/docs" />
+          </label>
+          <label>Pricing tier
+            <select name="pricingTier">
+              <option value="free" ${meta.pricingTier === "free" ? "selected" : ""}>Free</option>
+              <option value="paid" ${meta.pricingTier === "paid" ? "selected" : ""}>Paid</option>
+            </select>
+          </label>
+        </form>
+        <div class="confirm-dialog__actions">
+          <button class="btn btn--ghost" data-action="cancel">Cancel</button>
+          <button class="btn btn--primary" data-action="save">Save</button>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(overlay);
+    const form = overlay.querySelector("form");
+
+    const cleanup = () => overlay.remove();
+    overlay.querySelector('[data-action="cancel"]').addEventListener("click", () => { cleanup(); resolve(null); });
+    overlay.addEventListener("click", (e) => { if (e.target === overlay) { cleanup(); resolve(null); } });
+    overlay.querySelector('[data-action="save"]').addEventListener("click", () => {
+      const fd = new FormData(form);
+      const features = String(fd.get("features") || "")
+        .split(",").map((s) => s.trim()).filter(Boolean);
+      const result = {
+        category: String(fd.get("category") || "") || undefined,
+        description: String(fd.get("description") || "") || undefined,
+        features: features.length ? features : undefined,
+        supportUrl: String(fd.get("supportUrl") || "") || undefined,
+        documentationUrl: String(fd.get("documentationUrl") || "") || undefined,
+        pricingTier: String(fd.get("pricingTier") || "") || undefined,
+      };
+      cleanup();
+      resolve(result);
+    });
+  });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const btn = document.getElementById("btn-marketplace");
+  if (btn) btn.addEventListener("click", openMarketplacePanel);
+});

package/ui/preview.js

@@ -3,11 +3,71 @@
  */
 
 const previewFrame = document.getElementById("preview-frame");
+const previewEmptyState = document.getElementById("preview-empty-state");
+
+// Highlights to apply once the iframe finishes loading after the next refresh.
+let pendingChangedModules = null;
+let pendingNewModules = null;
+
+/**
+ * Show or hide the preview empty state. Called when generation starts or when
+ * the iframe finishes loading and we can detect whether any modules rendered.
+ */
+function setPreviewEmptyState(show) {
+  if (!previewEmptyState) return;
+  previewEmptyState.setAttribute("aria-hidden", show ? "false" : "true");
+}
+
+/**
+ * Inspect iframe contents post-load and toggle the empty state accordingly.
+ * Empty state stays visible if the rendered preview has no module content.
+ */
+function syncEmptyStateFromFrame() {
+  if (!previewEmptyState) return;
+  try {
+    const doc = previewFrame.contentDocument || previewFrame.contentWindow.document;
+    if (!doc || !doc.body) {
+      setPreviewEmptyState(true);
+      return;
+    }
+    const hasModules = doc.querySelector("[data-module]") !== null;
+    setPreviewEmptyState(!hasModules);
+  } catch {
+    // cross-origin — assume content is present
+    setPreviewEmptyState(false);
+  }
+}
+
+previewFrame.addEventListener("load", () => {
+  syncEmptyStateFromFrame();
+  if (!pendingChangedModules && !pendingNewModules) return;
+  const changed = pendingChangedModules;
+  const fresh = pendingNewModules;
+  pendingChangedModules = null;
+  pendingNewModules = null;
+  try {
+    const doc = previewFrame.contentDocument || previewFrame.contentWindow.document;
+    if (!doc || !doc.body) return;
+    ensureChangeHighlightStyles(doc);
+    if (fresh && fresh.length) animateNewModules(doc, fresh);
+    if (changed && changed.length) highlightChangedModules(doc, changed, fresh || []);
+  } catch {
+    // cross-origin — skip
+  }
+});
 
 /**
  * Refresh the preview iframe by reloading from /preview endpoint.
+ *
+ * @param {Object} [opts]
+ * @param {string[]} [opts.changedModules] Module names that were just regenerated.
+ * @param {string[]} [opts.newModules]     Subset of changedModules that are first-time additions.
  */
-function refreshPreview() {
+function refreshPreview(opts) {
+  if (opts && (opts.changedModules || opts.newModules)) {
+    pendingChangedModules = opts.changedModules || null;
+    pendingNewModules = opts.newModules || null;
+  }
   // Use srcdoc approach: fetch preview HTML and set as srcdoc
   // This avoids cache issues and allows the iframe to update smoothly
   fetch("/preview")
@@ -20,6 +80,79 @@ function refreshPreview() {
     });
 }
 
+// ---------------------------------------------------------------------------
+// Change highlighting — outline glow on regenerated modules and slide-in for
+// brand-new modules. Styles are injected into the sandboxed preview iframe.
+// ---------------------------------------------------------------------------
+
+function ensureChangeHighlightStyles(doc) {
+  if (doc.getElementById("vibespot-change-highlight-css")) return;
+  const style = doc.createElement("style");
+  style.id = "vibespot-change-highlight-css";
+  style.textContent = `
+    @keyframes vibespot-change-glow {
+      0%   { outline-color: rgba(232, 97, 58, 0.85); box-shadow: 0 0 0 6px rgba(232, 97, 58, 0.18); }
+      70%  { outline-color: rgba(232, 97, 58, 0.55); box-shadow: 0 0 0 4px rgba(232, 97, 58, 0.10); }
+      100% { outline-color: rgba(232, 97, 58, 0);    box-shadow: 0 0 0 0 rgba(232, 97, 58, 0);    }
+    }
+    .vibespot-module--changed {
+      outline: 2px solid rgba(232, 97, 58, 0.85);
+      outline-offset: 4px;
+      border-radius: 2px;
+      animation: vibespot-change-glow 2s ease-out forwards;
+    }
+    @keyframes vibespot-module-slide-in {
+      0%   { opacity: 0; transform: translateY(24px); }
+      100% { opacity: 1; transform: translateY(0); }
+    }
+    .vibespot-module--new {
+      animation: vibespot-module-slide-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .vibespot-module--changed,
+      .vibespot-module--new { animation: none; }
+      .vibespot-module--changed { outline-color: transparent; }
+    }
+  `;
+  doc.head.appendChild(style);
+}
+
+function highlightChangedModules(doc, moduleNames, newModuleNames) {
+  // Skip modules that are already getting the slide-in animation — the slide-in
+  // is a stronger signal on its own.
+  const newSet = new Set(newModuleNames);
+  for (const name of moduleNames) {
+    if (newSet.has(name)) continue;
+    const el = doc.querySelector(`[data-module="${cssEscape(name)}"]`);
+    if (!el) continue;
+    el.classList.remove("vibespot-module--changed");
+    // Force a reflow so the animation restarts if the class was just removed.
+    void el.offsetWidth;
+    el.classList.add("vibespot-module--changed");
+    setTimeout(() => {
+      el.classList.remove("vibespot-module--changed");
+    }, 2200);
+  }
+}
+
+function animateNewModules(doc, moduleNames) {
+  for (const name of moduleNames) {
+    const el = doc.querySelector(`[data-module="${cssEscape(name)}"]`);
+    if (!el) continue;
+    el.classList.add("vibespot-module--new");
+    setTimeout(() => {
+      el.classList.remove("vibespot-module--new");
+    }, 700);
+  }
+}
+
+function cssEscape(value) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(value);
+  }
+  return String(value).replace(/["\\]/g, "\\$&");
+}
+
 /**
  * Scroll the preview iframe to a specific module by name.
  */
@@ -49,6 +182,7 @@ function scrollPreviewToModule(moduleName) {
  * Called when AI generation starts to entertain the user while waiting.
  */
 function showGeneratingPreview() {
+  setPreviewEmptyState(false);
   const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -278,3 +412,87 @@ function clearAllModulesWorking() {
 
 // Preview refresh is triggered by setup.js after a session is created.
 // Do NOT auto-refresh here.
+
+// Select/edit mode has been unified into interact mode (inline-edit.js)
+
+// ---------------------------------------------------------------------------
+// HubL validity badge — aggregates per-module checks reported by chat.js into
+// a single status pill in the preview toolbar.
+// ---------------------------------------------------------------------------
+
+const hublBadgeEl = document.getElementById("hubl-badge");
+const hublBadgeLabelEl = hublBadgeEl ? hublBadgeEl.querySelector(".hubl-badge__label") : null;
+const hublBadgeCountEl = document.getElementById("hubl-badge-count");
+const hublModuleIssues = new Map();
+let hublBadgeReveal = null;
+
+function applyHublBadgeState() {
+  if (!hublBadgeEl) return;
+  let totalIssues = 0;
+  for (const issues of hublModuleIssues.values()) totalIssues += issues.length;
+  const failedModules = Array.from(hublModuleIssues.values()).filter((arr) => arr.length > 0).length;
+
+  const state = totalIssues === 0 ? "valid" : "issues";
+  hublBadgeEl.dataset.state = state;
+  hublBadgeEl.classList.toggle("hubl-badge--valid", state === "valid");
+  hublBadgeEl.classList.toggle("hubl-badge--issues", state === "issues");
+
+  if (hublBadgeLabelEl) {
+    hublBadgeLabelEl.textContent = state === "valid" ? "Valid HubL" : "HubL issues";
+  }
+  if (hublBadgeCountEl) {
+    if (state === "valid") {
+      hublBadgeCountEl.classList.add("hidden");
+      hublBadgeCountEl.textContent = "";
+    } else {
+      hublBadgeCountEl.classList.remove("hidden");
+      hublBadgeCountEl.textContent = String(totalIssues);
+    }
+  }
+
+  if (state === "valid") {
+    const checked = hublModuleIssues.size;
+    hublBadgeEl.title = checked === 0
+      ? "HubL syntax check — no modules generated yet."
+      : `HubL syntax check — all ${checked} module${checked === 1 ? "" : "s"} parse cleanly.`;
+  } else {
+    hublBadgeEl.title = `${totalIssues} HubL issue${totalIssues === 1 ? "" : "s"} across ${failedModules} module${failedModules === 1 ? "" : "s"}. Click to review.`;
+  }
+}
+
+function flashHublBadge() {
+  if (!hublBadgeEl) return;
+  hublBadgeEl.classList.remove("hubl-badge--flash");
+  // Force reflow so the animation restarts.
+  void hublBadgeEl.offsetWidth;
+  hublBadgeEl.classList.add("hubl-badge--flash");
+}
+
+window.resetHublCheck = function () {
+  hublModuleIssues.clear();
+  applyHublBadgeState();
+};
+
+window.reportHublCheck = function (moduleName, issues) {
+  if (!moduleName) return;
+  hublModuleIssues.set(moduleName, Array.isArray(issues) ? issues : []);
+  applyHublBadgeState();
+  flashHublBadge();
+};
+
+if (hublBadgeEl) {
+  applyHublBadgeState();
+  hublBadgeEl.addEventListener("click", () => {
+    if (hublBadgeEl.dataset.state !== "issues") return;
+    const lines = [];
+    for (const [name, issues] of hublModuleIssues) {
+      if (!issues.length) continue;
+      lines.push(`• ${name}: ${issues.map((i) => i.message || i.kind).join(", ")}`);
+    }
+    if (typeof appendSystemMessage === "function") {
+      appendSystemMessage(`HubL issues in current run:\n${lines.join("\n")}`);
+    } else {
+      console.warn("HubL issues:\n" + lines.join("\n"));
+    }
+  });
+}