vibespot 1.0.2 → 1.0.4

package/package.json

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

package/ui/chat.js

@@ -259,6 +259,13 @@ function ensurePipelineBubble() {
   scrollToBottom();
 }
 
+function markStepDone(el) {
+  el.classList.add("pipeline-step--done");
+  el.classList.remove("pipeline-step--active");
+  const icon = el.querySelector(".pipeline-step__icon");
+  if (icon) icon.textContent = "✓";
+}
+
 function handleAgentStep(msg) {
   ensurePipelineBubble();
 
@@ -267,15 +274,13 @@ function handleAgentStep(msg) {
   const existingStep = pipelineStepsEl.querySelector(`[data-step="${CSS.escape(msg.step)}"]:not(.pipeline-step--done)`);
   if (existingStep) {
     // Mark the current one as done and create a fresh one below
-    existingStep.classList.add("pipeline-step--done");
-    existingStep.classList.remove("pipeline-step--active");
+    markStepDone(existingStep);
   } else {
     // Mark all other active steps as done
     const existing = pipelineStepsEl.querySelectorAll(".pipeline-step");
     existing.forEach((el) => {
       if (!el.classList.contains("pipeline-step--done")) {
-        el.classList.add("pipeline-step--done");
-        el.classList.remove("pipeline-step--active");
+        markStepDone(el);
       }
     });
   }
@@ -356,10 +361,7 @@ function handlePipelineComplete(msg) {
 
   // Mark all steps as done (search whole bubble since quality_check is outside pipelineStepsEl)
   const bubble = streamingMsgEl || pipelineBubbleEl;
-  bubble.querySelectorAll(".pipeline-step").forEach((el) => {
-    el.classList.add("pipeline-step--done");
-    el.classList.remove("pipeline-step--active");
-  });
+  bubble.querySelectorAll(".pipeline-step").forEach((el) => markStepDone(el));
 
   // Add completion stats after the last element in the bubble
   const stats = document.createElement("div");
@@ -397,10 +399,7 @@ function handlePipelinePartial(msg) {
   if (timerEl) timerEl.remove();
 
   const bubble = streamingMsgEl || pipelineBubbleEl;
-  bubble.querySelectorAll(".pipeline-step").forEach((el) => {
-    el.classList.add("pipeline-step--done");
-    el.classList.remove("pipeline-step--active");
-  });
+  bubble.querySelectorAll(".pipeline-step").forEach((el) => markStepDone(el));
 
   const stats = document.createElement("div");
   stats.className = "pipeline-stats pipeline-stats--partial";

package/ui/dashboard.js

@@ -269,6 +269,31 @@ function closeModulePreview() {
 // Close button for module preview
 document.getElementById("dashboard-preview-close").addEventListener("click", closeModulePreview);
 
+// Delete button for module preview
+document.getElementById("dashboard-preview-delete").addEventListener("click", async () => {
+  const moduleName = activePreviewModule;
+  if (!moduleName) return;
+
+  const ok = await vibeConfirm(
+    `Delete module "${moduleName}"?`,
+    "This will remove it from all templates and delete it from disk.",
+    { confirmLabel: "Delete" }
+  );
+  if (!ok) return;
+
+  try {
+    await fetch("/api/modules", {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ moduleName, deleteEntirely: true }),
+    });
+    closeModulePreview();
+    await refreshDashboard();
+  } catch (err) {
+    await vibeAlert("Failed to delete module: " + err.message, "Error");
+  }
+});
+
 // ---------------------------------------------------------------------------
 // Brand assets
 // ---------------------------------------------------------------------------
@@ -447,14 +472,16 @@ async function openTemplate(templateId) {
 }
 
 async function confirmDeleteTemplate(templateId) {
-  const ok = await vibeConfirm("Delete this template?", "This cannot be undone.", { confirmLabel: "Delete" });
-  if (!ok) return;
+  const result = await vibeDeleteTemplateDialog();
+  if (!result) return; // cancelled
+
+  const deleteModules = result === "with_modules";
 
   try {
     await fetch("/api/templates", {
       method: "DELETE",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ templateId }),
+      body: JSON.stringify({ templateId, deleteModules }),
     });
     await refreshDashboard();
   } catch (err) {
@@ -462,6 +489,35 @@ async function confirmDeleteTemplate(templateId) {
   }
 }
 
+/**
+ * Three-option dialog: delete template only, delete template + modules, or cancel.
+ * @returns {Promise<"template_only"|"with_modules"|null>}
+ */
+function vibeDeleteTemplateDialog() {
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.className = "confirm-overlay";
+    overlay.innerHTML = `
+      <div class="confirm-dialog">
+        <div class="confirm-dialog__title">Delete template?</div>
+        <p class="confirm-dialog__warn">This cannot be undone.</p>
+        <div class="confirm-dialog__actions" style="flex-direction:column;gap:8px">
+          <button class="btn btn--danger" data-action="with_modules" style="width:100%">Delete template and its modules</button>
+          <button class="btn btn--secondary" data-action="template_only" style="width:100%">Delete template only (keep modules)</button>
+          <button class="btn btn--secondary" data-action="cancel" style="width:100%">Cancel</button>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(overlay);
+
+    const close = (val) => { overlay.remove(); resolve(val); };
+    overlay.querySelector('[data-action="with_modules"]').addEventListener("click", () => close("with_modules"));
+    overlay.querySelector('[data-action="template_only"]').addEventListener("click", () => close("template_only"));
+    overlay.querySelector('[data-action="cancel"]').addEventListener("click", () => close(null));
+    overlay.addEventListener("click", (e) => { if (e.target === overlay) close(null); });
+  });
+}
+
 async function cloneTemplateAction(templateId) {
   const label = prompt("Name for the cloned template:");
   if (!label) return;

package/ui/index.html

@@ -312,6 +312,7 @@
             <div class="dashboard__module-preview-header">
               <span class="dashboard__module-preview-name" id="dashboard-preview-name"></span>
               <span class="dashboard__module-preview-used" id="dashboard-preview-used"></span>
+              <button class="btn btn--danger btn--sm dashboard__module-preview-delete" id="dashboard-preview-delete">Delete module</button>
               <button class="dashboard__module-preview-close" id="dashboard-preview-close">&times;</button>
             </div>
             <iframe class="dashboard__module-preview-frame" id="dashboard-preview-frame" sandbox="allow-scripts allow-same-origin"></iframe>

package/ui/styles.css

@@ -2150,17 +2150,11 @@ body { display: flex; }
 
 .pipeline-step--done .pipeline-step__icon {
   animation: none;
-  visibility: hidden;
-  width: 0;
   display: inline-block;
-  position: relative;
 }
 
 .pipeline-step--done .pipeline-step__icon::after {
-  content: "✓";
-  font-size: 13px;
-  visibility: visible;
-  position: relative;
+  content: "";
 }
 
 .pipeline-step__decision {