vibespot 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibespot",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "AI-powered HubSpot CMS landing page builder — vibe coding & React converter",
   "type": "module",
   "bin": {

package/ui/chat.js

@@ -145,6 +145,7 @@ function handleWsMessage(msg) {
 
     case "error":
       stopPipelineTimer();
+      if (typeof clearAllModulesWorking === "function") clearAllModulesWorking();
       finishStreaming();
       pipelineBubbleEl = null;
       pipelineStepsEl = null;
@@ -213,7 +214,8 @@ function ensurePipelineBubble() {
     isStreaming = true;
     sendBtn.disabled = true;
     streamStartTime = Date.now();
-    if (typeof showGeneratingPreview === "function") showGeneratingPreview();
+    // Don't replace the preview with a spinner — agentic mode uses
+    // incremental placeholders and keeps the existing page visible.
   }
 
   // If startStreaming() already created an empty bubble, repurpose it
@@ -347,6 +349,14 @@ function handleModuleProgress(msg) {
     failed: "✗",
   };
   statusEl.textContent = statusLabels[msg.status] || msg.status;
+
+  // Mark/clear working overlay in the preview
+  if (msg.status === "generating" && typeof markModulesWorking === "function") {
+    markModulesWorking([msg.module]);
+  } else if ((msg.status === "complete" || msg.status === "failed") && typeof clearModuleWorking === "function") {
+    clearModuleWorking(msg.module);
+  }
+
   scrollToBottom();
 }
 
@@ -354,6 +364,7 @@ function handlePipelineComplete(msg) {
   if (!pipelineBubbleEl) return;
 
   stopPipelineTimer();
+  if (typeof clearAllModulesWorking === "function") clearAllModulesWorking();
 
   // Remove the live timer element
   const timerEl = pipelineBubbleEl.querySelector(".pipeline-timer");
@@ -363,13 +374,26 @@ function handlePipelineComplete(msg) {
   const bubble = streamingMsgEl || pipelineBubbleEl;
   bubble.querySelectorAll(".pipeline-step").forEach((el) => markStepDone(el));
 
+  // Show answer text for question intents
+  if (msg.answer) {
+    const answerEl = document.createElement("div");
+    answerEl.className = "pipeline-answer";
+    answerEl.textContent = msg.answer;
+    bubble.appendChild(answerEl);
+  }
+
   // Add completion stats after the last element in the bubble
   const stats = document.createElement("div");
   stats.className = "pipeline-stats";
   const duration = formatDuration(msg.durationMs);
-  stats.textContent = `Generated ${msg.modulesGenerated} module${msg.modulesGenerated === 1 ? "" : "s"} in ${duration}`;
-  if (msg.modulesUnchanged > 0) {
-    stats.textContent += ` (${msg.modulesUnchanged} unchanged)`;
+  if (msg.answer) {
+    // For questions, just show duration
+    stats.textContent = `Answered in ${duration}`;
+  } else {
+    stats.textContent = `Generated ${msg.modulesGenerated} module${msg.modulesGenerated === 1 ? "" : "s"} in ${duration}`;
+    if (msg.modulesUnchanged > 0) {
+      stats.textContent += ` (${msg.modulesUnchanged} unchanged)`;
+    }
   }
   // Place stats after quality_check step (or after modules if no quality step)
   const qualityStep = bubble.querySelector('[data-step="quality_check"]');
@@ -378,7 +402,7 @@ function handlePipelineComplete(msg) {
   } else if (pipelineModulesEl) {
     pipelineModulesEl.after(stats);
   } else {
-    pipelineStepsEl.appendChild(stats);
+    bubble.appendChild(stats);
   }
 
   clearStreamStatus();
@@ -394,6 +418,7 @@ function handlePipelinePartial(msg) {
   if (!pipelineBubbleEl) return;
 
   stopPipelineTimer();
+  if (typeof clearAllModulesWorking === "function") clearAllModulesWorking();
 
   const timerEl = pipelineBubbleEl.querySelector(".pipeline-timer");
   if (timerEl) timerEl.remove();
@@ -727,10 +752,8 @@ function startStreaming() {
   sendBtn.disabled = true;
   streamStartTime = Date.now();
 
-  // Show generating preview with spinner + fun messages
-  if (typeof showGeneratingPreview === "function") {
-    showGeneratingPreview();
-  }
+  // Don't show generating preview here — agentic mode keeps the page visible.
+  // For single-call mode, showGeneratingPreview() is called on first "stream" event.
 
   const time = formatMessageTime(streamStartTime);
   const div = document.createElement("div");
@@ -788,7 +811,13 @@ function flushStreamRender() {
 }
 
 function handleStreamStatus(status) {
-  if (!streamingMsgEl) startStreaming();
+  if (!streamingMsgEl) {
+    startStreaming();
+    // Single-call mode — show generating preview (agentic mode never sends stream_status)
+    if (typeof showGeneratingPreview === "function" && !pipelineBubbleEl) {
+      showGeneratingPreview();
+    }
+  }
 
   lastStreamStatus = status;
 

package/ui/preview.js

@@ -128,5 +128,153 @@ function showGeneratingPreview() {
   previewFrame.srcdoc = html;
 }
 
+// ---------------------------------------------------------------------------
+// "Working on it" overlay for modules being regenerated
+// ---------------------------------------------------------------------------
+
+const WORKING_MESSAGES = [
+  "Rethinking this section\u2026",
+  "Rewriting the code\u2026",
+  "Giving this a fresh coat of paint\u2026",
+  "Making it better\u2026",
+  "Tweaking the layout\u2026",
+  "Polishing the details\u2026",
+  "Almost there\u2026",
+  "Updating the design\u2026",
+  "Improving the copy\u2026",
+  "Refining the structure\u2026",
+];
+
+/**
+ * Inject the overlay CSS into the preview iframe (once).
+ */
+function ensureOverlayStyles(doc) {
+  if (doc.getElementById("vibespot-working-css")) return;
+  const style = doc.createElement("style");
+  style.id = "vibespot-working-css";
+  style.textContent = `
+    .vibespot-module--working { position: relative; }
+    .vibespot-module--working > *:not(.vibespot-working-overlay) {
+      filter: blur(3px) saturate(0.4);
+      opacity: 0.5;
+      transition: filter 0.4s ease, opacity 0.4s ease;
+      pointer-events: none;
+    }
+    .vibespot-working-overlay {
+      position: absolute; inset: 0;
+      display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      z-index: 9999;
+      pointer-events: none;
+    }
+    .vibespot-working-overlay__spinner {
+      width: 36px; height: 36px;
+      border: 3px solid rgba(232,97,58,0.15);
+      border-top-color: rgba(232,97,58,0.8);
+      border-radius: 50%;
+      animation: vw-spin 0.8s linear infinite;
+      margin-bottom: 12px;
+    }
+    .vibespot-working-overlay__text {
+      font-family: system-ui, -apple-system, sans-serif;
+      font-size: 14px; font-weight: 500;
+      color: rgba(255,255,255,0.7);
+      text-align: center;
+      max-width: 280px;
+      transition: opacity 0.5s ease;
+    }
+    .vibespot-working-overlay__text.fade { opacity: 0; }
+    @keyframes vw-spin { to { transform: rotate(360deg); } }
+  `;
+  doc.head.appendChild(style);
+}
+
+/** Active carousel intervals keyed by module name */
+const workingIntervals = new Map();
+
+/**
+ * Mark modules as "being worked on" — adds blur overlay with rotating messages.
+ */
+function markModulesWorking(moduleNames) {
+  try {
+    const doc = previewFrame.contentDocument || previewFrame.contentWindow.document;
+    if (!doc || !doc.body) return;
+    ensureOverlayStyles(doc);
+
+    for (const name of moduleNames) {
+      const el = doc.querySelector(`[data-module="${name}"]`);
+      if (!el || el.classList.contains("vibespot-module--working")) continue;
+
+      el.classList.add("vibespot-module--working");
+
+      const overlay = doc.createElement("div");
+      overlay.className = "vibespot-working-overlay";
+      overlay.innerHTML = `
+        <div class="vibespot-working-overlay__spinner"></div>
+        <div class="vibespot-working-overlay__text"></div>
+      `;
+      el.appendChild(overlay);
+
+      // Scroll to first working module
+      if (name === moduleNames[0]) {
+        el.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+
+      // Start message carousel
+      const textEl = overlay.querySelector(".vibespot-working-overlay__text");
+      let idx = Math.floor(Math.random() * WORKING_MESSAGES.length);
+      textEl.textContent = WORKING_MESSAGES[idx];
+
+      const interval = setInterval(() => {
+        textEl.classList.add("fade");
+        setTimeout(() => {
+          idx = (idx + 1) % WORKING_MESSAGES.length;
+          textEl.textContent = WORKING_MESSAGES[idx];
+          textEl.classList.remove("fade");
+        }, 500);
+      }, 3500);
+      workingIntervals.set(name, interval);
+    }
+  } catch { /* cross-origin */ }
+}
+
+/**
+ * Clear working overlay from a specific module (when it completes).
+ */
+function clearModuleWorking(moduleName) {
+  const interval = workingIntervals.get(moduleName);
+  if (interval) { clearInterval(interval); workingIntervals.delete(moduleName); }
+
+  try {
+    const doc = previewFrame.contentDocument || previewFrame.contentWindow.document;
+    if (!doc) return;
+    const el = doc.querySelector(`[data-module="${moduleName}"]`);
+    if (!el) return;
+    el.classList.remove("vibespot-module--working");
+    const overlay = el.querySelector(".vibespot-working-overlay");
+    if (overlay) overlay.remove();
+  } catch { /* cross-origin */ }
+}
+
+/**
+ * Clear all working overlays.
+ */
+function clearAllModulesWorking() {
+  for (const [name, interval] of workingIntervals) {
+    clearInterval(interval);
+  }
+  workingIntervals.clear();
+
+  try {
+    const doc = previewFrame.contentDocument || previewFrame.contentWindow.document;
+    if (!doc) return;
+    doc.querySelectorAll(".vibespot-module--working").forEach((el) => {
+      el.classList.remove("vibespot-module--working");
+      const overlay = el.querySelector(".vibespot-working-overlay");
+      if (overlay) overlay.remove();
+    });
+  } catch { /* cross-origin */ }
+}
+
 // Preview refresh is triggered by setup.js after a session is created.
 // Do NOT auto-refresh here.

package/ui/settings.js

@@ -13,6 +13,7 @@ const activePolls = {};
 const ENGINE_LABELS = {
   "claude-code": "Claude Code",
   "anthropic-api": "Anthropic API",
+  "claude-oauth": "Claude (OAuth)",
   "openai-api": "OpenAI API",
   "gemini-cli": "Gemini CLI",
   "gemini-api": "Gemini API",
@@ -99,6 +100,7 @@ function renderAITab(body, data) {
   const allEngines = [
     { id: "claude-code", label: "Claude Code" },
     { id: "anthropic-api", label: "Anthropic API" },
+    { id: "claude-oauth", label: "Claude (OAuth)" },
     { id: "openai-api", label: "OpenAI API" },
     { id: "gemini-cli", label: "Gemini CLI" },
     { id: "gemini-api", label: "Gemini API" },
@@ -224,6 +226,74 @@ function renderAITab(body, data) {
   }
   body.appendChild(keysSection);
 
+  // Claude OAuth section
+  const oauthSection = el("section", "settings__section");
+  oauthSection.appendChild(sectionTitle("Claude OAuth"));
+  oauthSection.appendChild(desc("Use your Claude Pro/Max subscription. Run `claude setup-token` in your terminal to get a token, then paste it below."));
+
+  const oauthCard = el("div", "settings__card");
+  const oauthInfo = env.tools?.claudeOAuth;
+
+  if (oauthInfo?.authenticated) {
+    const statusRow = el("div", "settings__card-row");
+    const statusLabel = el("span", "settings__card-label");
+    statusLabel.textContent = "Connected";
+    statusLabel.style.color = "var(--vibe-green)";
+    if (oauthInfo.expiresAt) {
+      const hrs = Math.max(0, Math.round((new Date(oauthInfo.expiresAt) - Date.now()) / 3600000));
+      statusLabel.textContent += ` (token expires in ${hrs}h)`;
+    }
+    statusRow.appendChild(statusLabel);
+
+    const disconnectBtn = el("button", "btn btn--sm btn--danger");
+    disconnectBtn.textContent = "Disconnect";
+    disconnectBtn.addEventListener("click", async () => {
+      await fetch("/api/settings/claude-oauth/logout", { method: "POST" });
+      refreshSettings();
+    });
+    statusRow.appendChild(disconnectBtn);
+    oauthCard.appendChild(statusRow);
+  }
+
+  const inputRow = el("div", "settings__card-row");
+  inputRow.style.gap = "8px";
+  const tokenInput = el("input", "settings__apikey-input");
+  tokenInput.type = "password";
+  tokenInput.placeholder = oauthInfo?.authenticated ? "••••••••••••• (saved)" : "sk-ant-oat01-...";
+  inputRow.appendChild(tokenInput);
+
+  const saveBtn = el("button", "btn btn--sm btn--primary");
+  saveBtn.textContent = "Save Token";
+  saveBtn.addEventListener("click", async () => {
+    const token = tokenInput.value.trim();
+    if (!token) return;
+    saveBtn.disabled = true;
+    saveBtn.textContent = "Saving...";
+    try {
+      const res = await fetch("/api/settings/claude-oauth/save", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ access_token: token }),
+      });
+      const data = await res.json();
+      if (data.ok) {
+        tokenInput.value = "";
+        refreshSettings();
+      } else {
+        alert(data.error || "Failed to save token");
+      }
+    } catch (err) {
+      alert("Failed: " + err.message);
+    }
+    saveBtn.disabled = false;
+    saveBtn.textContent = "Save Token";
+  });
+  inputRow.appendChild(saveBtn);
+  oauthCard.appendChild(inputRow);
+
+  oauthSection.appendChild(oauthCard);
+  body.appendChild(oauthSection);
+
   // CLI Tools section with toggles
   const cliSection = el("section", "settings__section");
   cliSection.appendChild(sectionTitle("CLI Tools"));
@@ -1102,6 +1172,7 @@ function getModelsForEngine(engine) {
         { id: "haiku", label: "Claude Haiku" },
       ];
     case "anthropic-api":
+    case "claude-oauth":
       return [
         { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
         { id: "claude-opus-4-6", label: "Claude Opus 4.6" },
@@ -1135,7 +1206,8 @@ function getModelsForEngine(engine) {
 function getCurrentModel(engine, config) {
   switch (engine) {
     case "claude-code": return config.claudeCodeModel || "sonnet";
-    case "anthropic-api": return config.anthropicApiModel || "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";
     default: return null;
   }

package/ui/styles.css

@@ -2214,6 +2214,14 @@ body { display: flex; }
   opacity: 0.8;
 }
 
+.pipeline-answer {
+  padding: 8px 0 4px;
+  font-size: 13px;
+  color: var(--text-primary, #e8e8e8);
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
 .pipeline-stats {
   font-size: 12px;
   color: var(--success, #4ade80);