vibespot 1.1.0 → 1.2.0

package/ui/preview.js

@@ -4,10 +4,39 @@
 
 const previewFrame = document.getElementById("preview-frame");
 
+// Highlights to apply once the iframe finishes loading after the next refresh.
+let pendingChangedModules = null;
+let pendingNewModules = null;
+
+previewFrame.addEventListener("load", () => {
+  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 +49,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.
  */
@@ -278,3 +380,216 @@ function clearAllModulesWorking() {
 
 // Preview refresh is triggered by setup.js after a session is created.
 // Do NOT auto-refresh here.
+
+// ---------------------------------------------------------------------------
+// Select mode — click an element in the preview to reference it in chat
+// ---------------------------------------------------------------------------
+
+const selectModeBtn = document.getElementById("select-mode-toggle");
+const previewContainer = document.getElementById("preview-container");
+
+let selectModeActive = false;
+let hoveredEl = null;
+let hoverLabelEl = null;
+let onMouseOver = null;
+let onMouseOut = null;
+let onClick = null;
+let onKeyDown = null;
+
+function ensureSelectModeStyles(doc) {
+  if (doc.getElementById("vibespot-select-css")) return;
+  const style = doc.createElement("style");
+  style.id = "vibespot-select-css";
+  style.textContent = `
+    html.vibespot-select-mode, html.vibespot-select-mode * { cursor: crosshair !important; }
+    html.vibespot-select-mode a, html.vibespot-select-mode button { pointer-events: none; }
+    .vibespot-select-hover {
+      outline: 2px solid #e8613a !important;
+      outline-offset: 2px !important;
+      background-color: rgba(232, 97, 58, 0.08) !important;
+    }
+    .vibespot-select-label {
+      position: fixed;
+      z-index: 2147483647;
+      pointer-events: none;
+      font: 500 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      color: #fff;
+      background: #e8613a;
+      padding: 3px 8px;
+      border-radius: 4px;
+      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
+      white-space: nowrap;
+      max-width: 70vw;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  `;
+  doc.head.appendChild(style);
+}
+
+function describeElement(el) {
+  if (!el) return "";
+  const moduleEl = el.closest("[data-module]");
+  const moduleName = moduleEl ? moduleEl.getAttribute("data-module") : null;
+  const tag = (el.tagName || "").toLowerCase();
+  let kind = tag;
+  if (tag.match(/^h[1-6]$/)) kind = "headline";
+  else if (tag === "p") kind = "paragraph";
+  else if (tag === "a") kind = "link";
+  else if (tag === "button") kind = "button";
+  else if (tag === "img") kind = "image";
+  else if (tag === "ul" || tag === "ol") kind = "list";
+  else if (tag === "li") kind = "list item";
+
+  if (moduleName && moduleEl === el) return moduleName;
+  if (moduleName) return `${moduleName} > ${kind}`;
+  return kind;
+}
+
+function buildChatPrefill(el) {
+  if (!el) return "";
+  const moduleEl = el.closest("[data-module]");
+  const moduleName = moduleEl ? moduleEl.getAttribute("data-module") : null;
+  const tag = (el.tagName || "").toLowerCase();
+  const text = (el.textContent || "").trim().replace(/\s+/g, " ").slice(0, 80);
+
+  let elementPart;
+  if (tag.match(/^h[1-6]$/)) elementPart = "the headline";
+  else if (tag === "p") elementPart = "the paragraph";
+  else if (tag === "a") elementPart = "the link";
+  else if (tag === "button") elementPart = "the button";
+  else if (tag === "img") elementPart = "the image";
+  else elementPart = `the ${tag}`;
+
+  if (moduleEl === el && moduleName) {
+    return `In the ${moduleName} section, `;
+  }
+  if (moduleName) {
+    const quote = text ? ` ("${text}${text.length === 80 ? "…" : ""}")` : "";
+    return `In the ${moduleName} section, ${elementPart}${quote} `;
+  }
+  return `${elementPart} `;
+}
+
+function clearHover(doc) {
+  if (hoveredEl) {
+    hoveredEl.classList.remove("vibespot-select-hover");
+    hoveredEl = null;
+  }
+  if (hoverLabelEl && hoverLabelEl.parentNode) {
+    hoverLabelEl.parentNode.removeChild(hoverLabelEl);
+  }
+  hoverLabelEl = null;
+}
+
+function attachSelectHandlers() {
+  let doc;
+  try {
+    doc = previewFrame.contentDocument || previewFrame.contentWindow?.document;
+  } catch { return; }
+  if (!doc || !doc.body) return;
+
+  ensureSelectModeStyles(doc);
+  doc.documentElement.classList.add("vibespot-select-mode");
+
+  onMouseOver = (e) => {
+    const el = e.target;
+    if (!el || el === doc.body || el === doc.documentElement) return;
+    if (el.classList && el.classList.contains("vibespot-select-label")) return;
+    if (hoveredEl === el) return;
+    if (hoveredEl) hoveredEl.classList.remove("vibespot-select-hover");
+    hoveredEl = el;
+    el.classList.add("vibespot-select-hover");
+
+    if (!hoverLabelEl) {
+      hoverLabelEl = doc.createElement("div");
+      hoverLabelEl.className = "vibespot-select-label";
+      doc.body.appendChild(hoverLabelEl);
+    }
+    hoverLabelEl.textContent = describeElement(el);
+    const rect = el.getBoundingClientRect();
+    hoverLabelEl.style.top = Math.max(4, rect.top - 22) + "px";
+    hoverLabelEl.style.left = Math.max(4, rect.left) + "px";
+  };
+
+  onMouseOut = (e) => {
+    if (!e.relatedTarget) clearHover(doc);
+  };
+
+  onClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const prefill = buildChatPrefill(e.target);
+    deactivateSelectMode();
+    if (typeof window.prefillChatInput === "function") {
+      window.prefillChatInput(prefill);
+    }
+  };
+
+  onKeyDown = (e) => {
+    if (e.key === "Escape") deactivateSelectMode();
+  };
+
+  doc.addEventListener("mouseover", onMouseOver, true);
+  doc.addEventListener("mouseout", onMouseOut, true);
+  doc.addEventListener("click", onClick, true);
+  doc.addEventListener("keydown", onKeyDown, true);
+}
+
+function detachSelectHandlers() {
+  let doc;
+  try {
+    doc = previewFrame.contentDocument || previewFrame.contentWindow?.document;
+  } catch { return; }
+  if (!doc) return;
+  doc.documentElement.classList.remove("vibespot-select-mode");
+  clearHover(doc);
+  if (onMouseOver) doc.removeEventListener("mouseover", onMouseOver, true);
+  if (onMouseOut) doc.removeEventListener("mouseout", onMouseOut, true);
+  if (onClick) doc.removeEventListener("click", onClick, true);
+  if (onKeyDown) doc.removeEventListener("keydown", onKeyDown, true);
+  onMouseOver = onMouseOut = onClick = onKeyDown = null;
+}
+
+function activateSelectMode() {
+  if (selectModeActive) return;
+  selectModeActive = true;
+  if (selectModeBtn) selectModeBtn.setAttribute("aria-pressed", "true");
+  if (previewContainer) previewContainer.classList.add("preview--select-mode");
+  attachSelectHandlers();
+}
+
+function deactivateSelectMode() {
+  if (!selectModeActive) return;
+  selectModeActive = false;
+  if (selectModeBtn) selectModeBtn.setAttribute("aria-pressed", "false");
+  if (previewContainer) previewContainer.classList.remove("preview--select-mode");
+  detachSelectHandlers();
+}
+
+function setSelectModeDisabled(disabled) {
+  if (!selectModeBtn) return;
+  if (disabled) {
+    deactivateSelectMode();
+    selectModeBtn.disabled = true;
+  } else {
+    selectModeBtn.disabled = false;
+  }
+}
+
+if (selectModeBtn) {
+  selectModeBtn.addEventListener("click", () => {
+    if (selectModeBtn.disabled) return;
+    if (selectModeActive) deactivateSelectMode();
+    else activateSelectMode();
+  });
+}
+
+if (previewFrame) {
+  previewFrame.addEventListener("load", () => {
+    if (selectModeActive) attachSelectHandlers();
+  });
+}
+
+window.setSelectModeDisabled = setSelectModeDisabled;
+window.deactivateSelectMode = deactivateSelectMode;

package/ui/settings.js

@@ -100,7 +100,7 @@ function renderAITab(body, data) {
   // Engine selector
   const section = el("section", "settings__section");
   section.appendChild(sectionTitle("Engine"));
-  section.appendChild(desc("Choose which AI engine generates your HubSpot modules. API engines need an API key. CLI engines need the tool installed on your system."));
+  section.appendChild(desc("Choose which AI engine generates your HubSpot sections. API engines need an API key. CLI engines need the tool installed on your system."));
 
   const selectEl = el("div", "settings__engine-select");
   const allEngines = [
@@ -176,9 +176,9 @@ function renderAITab(body, data) {
   const agenticMode = config.agenticMode;
 
   if (isCli) {
-    agenticSection.appendChild(desc("Decompose AI generation into specialized agents with per-module parallel calls. Better quality and structured output enforcement. CLI engines use subprocess calls — may be slower than API engines."));
+    agenticSection.appendChild(desc("Decompose AI generation into specialized agents with per-section parallel calls. Better quality and structured output enforcement. CLI engines use subprocess calls — may be slower than API engines."));
   } else {
-    agenticSection.appendChild(desc("Decompose AI generation into specialized agents with per-module parallel calls. Better quality and structured output enforcement."));
+    agenticSection.appendChild(desc("Decompose AI generation into specialized agents with per-section parallel calls. Better quality and structured output enforcement."));
   }
 
   const toggleRow = el("div", "settings__toggle-row");
@@ -189,7 +189,7 @@ function renderAITab(body, data) {
 
   const sub = el("div", "settings__toggle-label-sub");
   if (agenticMode === true) {
-    sub.textContent = "Active — multi-stage pipeline with parallel module generation";
+    sub.textContent = "Active — multi-stage pipeline with parallel section generation";
     sub.style.color = "var(--success)";
   } else if (agenticMode === false) {
     sub.textContent = "Disabled — using single-call mode";
@@ -551,7 +551,7 @@ function renderFigmaTab(body, data) {
 
   const section = el("section", "settings__section");
   section.appendChild(sectionTitle("Personal Access Token"));
-  section.appendChild(desc("Connect your Figma account to import designs directly into HubSpot CMS modules. Tokens are stored locally and only used to call the Figma API."));
+  section.appendChild(desc("Connect your Figma account to import designs directly into HubSpot CMS sections. Tokens are stored locally and only used to call the Figma API."));
 
   const figmaToken = config.figmaToken;
   const figmaKeyInfo = {
@@ -1394,36 +1394,47 @@ function getModelsForEngine(engine) {
   switch (engine) {
     case "claude-code":
       return [
-        { id: "sonnet", label: "Claude Sonnet (default)" },
-        { id: "opus", label: "Claude Opus" },
-        { id: "haiku", label: "Claude Haiku" },
+        { id: "claude-opus-4-7", label: "Claude Opus 4.7" },
+        { id: "claude-opus-4-6", label: "Claude Opus 4.6" },
+        { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6 (default)" },
+        { id: "claude-sonnet-4-5", label: "Claude Sonnet 4.5" },
+        { id: "claude-haiku-4-5", label: "Claude Haiku 4.5" },
       ];
     case "anthropic-api":
     case "claude-oauth":
       return [
-        { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
+        { id: "claude-opus-4-7", label: "Claude Opus 4.7" },
         { id: "claude-opus-4-6", label: "Claude Opus 4.6" },
+        { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6 (default)" },
+        { id: "claude-sonnet-4-5", label: "Claude Sonnet 4.5" },
         { id: "claude-haiku-4-5-20251001", label: "Claude Haiku 4.5" },
       ];
     case "openai-api":
       return [
-        { id: "gpt-4o", label: "GPT-4o (default)" },
-        { id: "gpt-4o-mini", label: "GPT-4o Mini" },
-        { id: "o3", label: "o3" },
-        { id: "o4-mini", label: "o4 Mini" },
+        { id: "gpt-5.5", label: "GPT-5.5 (default)" },
+        { id: "gpt-5.5-pro", label: "GPT-5.5 Pro" },
+        { id: "gpt-5.4-mini", label: "GPT-5.4 Mini" },
+        { id: "gpt-5.4-nano", label: "GPT-5.4 Nano" },
+        { id: "gpt-5.3-codex", label: "GPT-5.3 Codex" },
       ];
     case "gemini-cli":
     case "gemini-api":
       return [
-        { id: "gemini-2.5-flash", label: "Gemini 2.5 Flash (default)" },
-        { id: "gemini-2.5-pro", label: "Gemini 2.5 Pro" },
+        { 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" },
       ];
     case "codex-cli":
       return [
-        { id: "o4-mini", label: "o4 Mini (default)" },
-        { id: "o3", label: "o3" },
-        { id: "gpt-4o", label: "GPT-4o" },
+        { id: "gpt-5.5", label: "GPT-5.5 (default)" },
+        { id: "gpt-5.5-pro", label: "GPT-5.5 Pro" },
+        { id: "gpt-5.3-codex", label: "GPT-5.3 Codex" },
+        { id: "gpt-5.2-codex", label: "GPT-5.2 Codex" },
+        { id: "gpt-5.1-codex-max", label: "GPT-5.1 Codex Max" },
+        { id: "gpt-5.1-codex-mini", label: "GPT-5.1 Codex Mini" },
+        { id: "gpt-5.4-mini", label: "GPT-5.4 Mini" },
+        { id: "gpt-5.4-nano", label: "GPT-5.4 Nano" },
+        { id: "codex-mini-latest", label: "Codex Mini (latest)" },
       ];
     default:
       return [];
@@ -1432,10 +1443,13 @@ function getModelsForEngine(engine) {
 
 function getCurrentModel(engine, config) {
   switch (engine) {
-    case "claude-code": return config.claudeCodeModel || "sonnet";
+    case "claude-code": return config.claudeCodeModel || "claude-sonnet-4-6";
     case "anthropic-api":
     case "claude-oauth": return config.anthropicApiModel || "claude-sonnet-4-6";
-    case "openai-api": return config.openaiApiModel || "gpt-4o";
+    case "openai-api": return config.openaiApiModel || "gpt-5.5";
+    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";
     default: return null;
   }
 }
@@ -1501,7 +1515,7 @@ document.getElementById("settings-overlay").addEventListener("click", (e) => {
   if (e.target.id === "settings-overlay") closeSettings();
 });
 
-document.getElementById("btn-setup-settings").addEventListener("click", openSettings);
+document.getElementById("btn-setup-settings").addEventListener("click", () => openSettings());
 
 document.addEventListener("keydown", (e) => {
   if (e.key === "Escape" && !document.getElementById("settings-overlay").classList.contains("hidden")) {