vibespot 1.0.1 → 1.0.2

package/package.json

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

package/ui/chat.js

@@ -35,6 +35,7 @@ function connectWebSocket() {
     ws.close();
     ws = null;
   }
+  brandExtractionPromptShown = false;
 
   const protocol = location.protocol === "https:" ? "wss:" : "ws:";
   ws = new WebSocket(`${protocol}//${location.host}`);
@@ -174,6 +175,18 @@ function handleWsMessage(msg) {
     case "agentic_prompt":
       handleAgenticPrompt();
       break;
+    case "suggest_brand_extraction":
+      handleSuggestBrandExtraction();
+      break;
+    case "brand_asset_extracted":
+      handleBrandAssetExtracted(msg.assetType);
+      break;
+    case "brand_extraction_complete":
+      handleBrandExtractionComplete();
+      break;
+    case "brand_extraction_error":
+      appendSystemMessage("Brand extraction failed: " + (msg.message || "Unknown error"));
+      break;
   }
 }
 
@@ -440,6 +453,53 @@ async function handleAgenticPrompt() {
   } catch { /* ignore */ }
 }
 
+// ---------------------------------------------------------------------------
+// Brand asset extraction prompt
+// ---------------------------------------------------------------------------
+
+let brandExtractionPromptShown = false;
+
+function handleSuggestBrandExtraction() {
+  if (brandExtractionPromptShown) return;
+  brandExtractionPromptShown = true;
+
+  const el = document.createElement("div");
+  el.className = "chat-msg chat-msg--system brand-extraction-prompt";
+  el.innerHTML = `
+    <div class="chat-msg__system" style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
+      <span>Extract product context &amp; styleguide from your page? Helps keep future templates consistent.</span>
+      <button class="btn btn--sm btn--primary" id="btn-accept-extraction">Extract</button>
+      <button class="btn btn--sm btn--outline" id="btn-dismiss-extraction">Dismiss</button>
+    </div>
+  `;
+
+  messagesEl.appendChild(el);
+  scrollToBottom();
+
+  el.querySelector("#btn-accept-extraction").addEventListener("click", () => {
+    el.querySelector(".brand-extraction-prompt__actions").innerHTML =
+      '<span class="brand-extraction-prompt__status">Extracting...</span>';
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: "extract_brand_assets" }));
+    }
+  });
+
+  el.querySelector("#btn-dismiss-extraction").addEventListener("click", () => {
+    el.remove();
+  });
+}
+
+function handleBrandAssetExtracted(assetType) {
+  const labelMap = { themeContext: "Product context", styleguide: "Styleguide", brandvoice: "Brand voice" };
+  const label = labelMap[assetType] || assetType;
+  appendSystemMessage(`${label} extracted and saved.`);
+}
+
+function handleBrandExtractionComplete() {
+  const prompt = document.querySelector(".brand-extraction-prompt");
+  if (prompt) prompt.remove();
+}
+
 // ---------------------------------------------------------------------------
 // File attachments
 // ---------------------------------------------------------------------------

package/ui/dashboard.js

@@ -273,32 +273,32 @@ document.getElementById("dashboard-preview-close").addEventListener("click", clo
 // Brand assets
 // ---------------------------------------------------------------------------
 
+const ASSET_LABELS = { styleguide: "Styleguide", brandvoice: "Brand Voice", themeContext: "Product Context" };
+const ASSET_FILES = { styleguide: "styleguide.md", brandvoice: "brandvoice.md", themeContext: "theme-context.md" };
+const ASSET_FLAGS = { styleguide: "hasStyleguide", brandvoice: "hasBrandvoice", themeContext: "hasThemeContext" };
+
 function renderBrandAssets(assets) {
-  const sgIcon = document.getElementById("brand-icon-styleguide");
-  const bvIcon = document.getElementById("brand-icon-brandvoice");
-
-  if (assets.hasStyleguide) {
-    sgIcon.textContent = "\u2713";
-    sgIcon.classList.add("brand-asset-upload__icon--done");
-  } else {
-    sgIcon.textContent = "+";
-    sgIcon.classList.remove("brand-asset-upload__icon--done");
-  }
+  for (const [type, flagKey] of Object.entries(ASSET_FLAGS)) {
+    const card = document.querySelector(`.brand-asset-card[data-asset="${type}"]`);
+    if (!card) continue;
+    const icon = card.querySelector(".brand-asset-card__icon");
+    const hasAsset = !!assets[flagKey];
+
+    if (hasAsset) {
+      icon.textContent = "\u2713";
+      icon.classList.add("brand-asset-card__icon--done");
+    } else {
+      icon.textContent = "+";
+      icon.classList.remove("brand-asset-card__icon--done");
+    }
 
-  if (assets.hasBrandvoice) {
-    bvIcon.textContent = "\u2713";
-    bvIcon.classList.add("brand-asset-upload__icon--done");
-  } else {
-    bvIcon.textContent = "+";
-    bvIcon.classList.remove("brand-asset-upload__icon--done");
+    // Toggle which action set is visible on hover
+    const actions = card.querySelector(".brand-asset-card__actions");
+    const manage = card.querySelector(".brand-asset-card__manage");
+    if (actions) actions.classList.toggle("hidden", hasAsset);
+    if (manage) manage.classList.toggle("hidden", !hasAsset);
   }
 
-  // Show/hide action buttons based on asset existence
-  const sgActions = document.getElementById("brand-actions-styleguide");
-  if (sgActions) sgActions.classList.toggle("hidden", !assets.hasStyleguide);
-  const bvActions = document.getElementById("brand-actions-brandvoice");
-  if (bvActions) bvActions.classList.toggle("hidden", !assets.hasBrandvoice);
-
   // Humanify toggle
   const humanifyCheckbox = document.getElementById("humanify-checkbox");
   if (humanifyCheckbox) {
@@ -306,37 +306,24 @@ function renderBrandAssets(assets) {
   }
 }
 
-async function viewStyleguide() {
+async function viewBrandAsset(type) {
   try {
     const res = await fetch("/api/brand-assets");
     const data = await res.json();
-    if (data.styleguide) {
-      await vibeViewContent(data.styleguide, "Styleguide", "styleguide.md");
+    const content = data[type];
+    if (content) {
+      await vibeViewContent(content, ASSET_LABELS[type], ASSET_FILES[type]);
     } else {
-      await vibeAlert("No styleguide found.", "Info");
+      await vibeAlert(`No ${ASSET_LABELS[type].toLowerCase()} found.`, "Info");
     }
   } catch (err) {
-    await vibeAlert("Failed to load styleguide: " + err.message, "Error");
-  }
-}
-
-async function viewBrandvoice() {
-  try {
-    const res = await fetch("/api/brand-assets");
-    const data = await res.json();
-    if (data.brandvoice) {
-      await vibeViewContent(data.brandvoice, "Brand Voice", "brandvoice.md");
-    } else {
-      await vibeAlert("No brand voice found.", "Info");
-    }
-  } catch (err) {
-    await vibeAlert("Failed to load brand voice: " + err.message, "Error");
+    await vibeAlert(`Failed to load: ${err.message}`, "Error");
   }
 }
 
 async function deleteBrandAsset(type) {
-  const label = type === "styleguide" ? "styleguide" : "brand voice";
-  const ok = await vibeConfirm(`Remove ${label}?`, "This will delete the file from disk.", { confirmLabel: "Remove", confirmClass: "btn--danger" });
+  const label = ASSET_LABELS[type] || type;
+  const ok = await vibeConfirm(`Remove ${label.toLowerCase()}?`, "This will delete the file from disk.", { confirmLabel: "Remove", confirmClass: "btn--danger" });
   if (!ok) return;
   try {
     const res = await fetch("/api/brand-assets", {
@@ -352,10 +339,57 @@ async function deleteBrandAsset(type) {
   }
 }
 
-document.getElementById("btn-view-styleguide")?.addEventListener("click", viewStyleguide);
-document.getElementById("btn-view-brandvoice")?.addEventListener("click", viewBrandvoice);
-document.getElementById("btn-delete-styleguide")?.addEventListener("click", () => deleteBrandAsset("styleguide"));
-document.getElementById("btn-delete-brandvoice")?.addEventListener("click", () => deleteBrandAsset("brandvoice"));
+async function extractBrandAsset(type, card) {
+  const labelEl = card.querySelector(".brand-asset-card__label");
+  const origLabel = labelEl?.textContent;
+  if (labelEl) labelEl.textContent = "Extracting...";
+  card.classList.add("brand-asset-card--extracting");
+  try {
+    const res = await fetch("/api/brand-assets/extract", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ type }),
+    });
+    const data = await res.json();
+    if (data.ok && data.content) {
+      await refreshDashboard();
+      const view = await vibeConfirm(
+        `${ASSET_LABELS[type]} extracted.`,
+        "Would you like to view it?",
+        { confirmLabel: "View", confirmClass: "btn--primary" },
+      );
+      if (view) await vibeViewContent(data.content, ASSET_LABELS[type], ASSET_FILES[type]);
+    } else {
+      await vibeAlert(data.error || "Nothing to extract — generate some modules first.", "Info");
+    }
+  } catch (err) {
+    await vibeAlert("Extraction failed: " + err.message, "Error");
+  } finally {
+    card.classList.remove("brand-asset-card--extracting");
+    if (labelEl) labelEl.textContent = origLabel;
+  }
+}
+
+// Event delegation for brand asset cards
+document.getElementById("dashboard-brand-assets")?.addEventListener("click", (e) => {
+  const card = e.target.closest(".brand-asset-card");
+  if (!card) return;
+  const type = card.dataset.asset;
+  if (!type) return;
+
+  const action = e.target.closest("[data-action]")?.dataset?.action;
+  if (action === "view") { viewBrandAsset(type); return; }
+  if (action === "delete") { deleteBrandAsset(type); return; }
+  if (action === "extract") { extractBrandAsset(type, card); return; }
+});
+
+// File upload via label inside cards
+document.getElementById("dashboard-brand-assets")?.addEventListener("change", (e) => {
+  if (e.target.type !== "file") return;
+  const card = e.target.closest(".brand-asset-card");
+  if (!card || !e.target.files[0]) return;
+  handleBrandFileSelected(card.dataset.asset, e.target.files[0]);
+});
 
 // ---------------------------------------------------------------------------
 // Actions
@@ -541,33 +575,42 @@ document.getElementById("dashboard-deploy-btn").addEventListener("click", () =>
   }
 });
 
-// Brand asset file inputs
-document.getElementById("brand-upload-styleguide").querySelector("input").addEventListener("change", (e) => {
-  if (e.target.files[0]) handleBrandFileSelected("styleguide", e.target.files[0]);
-});
-document.getElementById("brand-upload-brandvoice").querySelector("input").addEventListener("change", (e) => {
-  if (e.target.files[0]) handleBrandFileSelected("brandvoice", e.target.files[0]);
-});
-
-// Extract design from theme
-document.getElementById("btn-extract-design")?.addEventListener("click", async () => {
-  const btn = document.getElementById("btn-extract-design");
+// Extract All button
+document.getElementById("btn-extract-all")?.addEventListener("click", async () => {
+  const btn = document.getElementById("btn-extract-all");
   const origText = btn.textContent;
   btn.textContent = "Extracting...";
   btn.disabled = true;
 
+  // Mark all cards as extracting
+  const cards = document.querySelectorAll(".brand-asset-card");
+  const savedLabels = new Map();
+  cards.forEach((card) => {
+    const labelEl = card.querySelector(".brand-asset-card__label");
+    if (labelEl) {
+      savedLabels.set(card, labelEl.textContent);
+      labelEl.textContent = "Extracting...";
+    }
+    card.classList.add("brand-asset-card--extracting");
+  });
+
   try {
     const res = await fetch("/api/brand-assets/extract", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({}),
+      body: JSON.stringify({ type: "all" }),
     });
     const data = await res.json();
     if (data.ok) {
       await refreshDashboard();
-      const view = await vibeConfirm("Design system extracted and saved as styleguide.", "Would you like to view it?", { confirmLabel: "View Styleguide", confirmClass: "btn--primary" });
-      if (view && data.styleguide) {
-        await vibeViewContent(data.styleguide, "Styleguide", "styleguide.md");
+      const extracted = data.extracted || {};
+      const names = Object.entries(extracted)
+        .filter(([, v]) => v)
+        .map(([k]) => ASSET_LABELS[k] || k);
+      if (names.length > 0) {
+        await vibeAlert(`Extracted: ${names.join(", ")}`, "Done");
+      } else {
+        await vibeAlert("Nothing to extract \u2014 generate some modules first.", "Info");
       }
     } else {
       await vibeAlert(data.error || "Extraction failed", "Error");
@@ -577,6 +620,11 @@ document.getElementById("btn-extract-design")?.addEventListener("click", async (
   } finally {
     btn.textContent = origText;
     btn.disabled = false;
+    cards.forEach((card) => {
+      card.classList.remove("brand-asset-card--extracting");
+      const labelEl = card.querySelector(".brand-asset-card__label");
+      if (labelEl && savedLabels.has(card)) labelEl.textContent = savedLabels.get(card);
+    });
   }
 });
 

package/ui/index.html

@@ -205,29 +205,49 @@
               <span class="brand-asset-toggle__label">Humanify</span>
               <span class="brand-asset-toggle__tooltip" data-tooltip="Strips AI-sounding copy: removes em dashes, banned words like 'delve' and 'leverage', cliché openers, and forced enthusiasm. Makes your landing page read like a human wrote it.">?</span>
             </div>
-            <div class="brand-asset-row">
-              <label class="brand-asset-upload" id="brand-upload-styleguide">
-                <input type="file" accept=".md,.txt" hidden>
-                <span class="brand-asset-upload__icon" id="brand-icon-styleguide">+</span>
-                <span class="brand-asset-upload__label">styleguide.md</span>
-              </label>
-              <span class="brand-asset-actions hidden" id="brand-actions-styleguide">
-                <button class="brand-asset-action" title="View" id="btn-view-styleguide"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
-                <button class="brand-asset-action brand-asset-action--delete" title="Remove" id="btn-delete-styleguide">&times;</button>
-              </span>
+            <div class="brand-asset-card" data-asset="styleguide">
+              <div class="brand-asset-card__base">
+                <span class="brand-asset-card__icon" id="brand-icon-styleguide">+</span>
+                <span class="brand-asset-card__label">styleguide</span>
+              </div>
+              <div class="brand-asset-card__actions">
+                <label class="brand-asset-card__btn" title="Upload .md/.txt file"><input type="file" accept=".md,.txt" hidden>Upload</label>
+                <button class="brand-asset-card__btn" data-action="extract" title="AI-extract from theme">Extract</button>
+              </div>
+              <div class="brand-asset-card__manage hidden">
+                <button class="brand-asset-card__btn" data-action="view" title="View">View</button>
+                <button class="brand-asset-card__btn brand-asset-card__btn--danger" data-action="delete" title="Remove">Delete</button>
+              </div>
             </div>
-            <div class="brand-asset-row">
-              <label class="brand-asset-upload" id="brand-upload-brandvoice">
-                <input type="file" accept=".md,.txt" hidden>
-                <span class="brand-asset-upload__icon" id="brand-icon-brandvoice">+</span>
-                <span class="brand-asset-upload__label">brandvoice.md</span>
-              </label>
-              <span class="brand-asset-actions hidden" id="brand-actions-brandvoice">
-                <button class="brand-asset-action" title="View" id="btn-view-brandvoice"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
-                <button class="brand-asset-action brand-asset-action--delete" title="Remove" id="btn-delete-brandvoice">&times;</button>
-              </span>
+            <div class="brand-asset-card" data-asset="brandvoice">
+              <div class="brand-asset-card__base">
+                <span class="brand-asset-card__icon" id="brand-icon-brandvoice">+</span>
+                <span class="brand-asset-card__label">brand voice</span>
+              </div>
+              <div class="brand-asset-card__actions">
+                <label class="brand-asset-card__btn" title="Upload .md/.txt file"><input type="file" accept=".md,.txt" hidden>Upload</label>
+                <button class="brand-asset-card__btn" data-action="extract" title="AI-extract from page copy">Extract</button>
+              </div>
+              <div class="brand-asset-card__manage hidden">
+                <button class="brand-asset-card__btn" data-action="view" title="View">View</button>
+                <button class="brand-asset-card__btn brand-asset-card__btn--danger" data-action="delete" title="Remove">Delete</button>
+              </div>
+            </div>
+            <div class="brand-asset-card" data-asset="themeContext">
+              <div class="brand-asset-card__base">
+                <span class="brand-asset-card__icon" id="brand-icon-themeContext">+</span>
+                <span class="brand-asset-card__label">product context</span>
+              </div>
+              <div class="brand-asset-card__actions">
+                <label class="brand-asset-card__btn" title="Upload .md/.txt file"><input type="file" accept=".md,.txt" hidden>Upload</label>
+                <button class="brand-asset-card__btn" data-action="extract" title="AI-extract from page content">Extract</button>
+              </div>
+              <div class="brand-asset-card__manage hidden">
+                <button class="brand-asset-card__btn" data-action="view" title="View">View</button>
+                <button class="brand-asset-card__btn brand-asset-card__btn--danger" data-action="delete" title="Remove">Delete</button>
+              </div>
             </div>
-            <button class="btn btn--sm btn--outline" id="btn-extract-design" title="Auto-extract design system from this theme's CSS and modules">Extract from Theme</button>
+            <button class="btn btn--sm btn--outline" id="btn-extract-all" title="AI-extract all brand assets from this theme">Extract All</button>
             <button class="btn btn--sm btn--outline" id="btn-import-reference" title="Import design from another HubSpot theme or local folder">Import Reference</button>
           </div>
         </section>

package/ui/styles.css

@@ -807,69 +807,90 @@ body { display: flex; }
   gap: 12px;
 }
 
-.brand-asset-upload {
+/* Brand asset cards — ghost buttons with hover-expand actions */
+.brand-asset-card {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
+  align-items: stretch;
   border: 1px dashed var(--border);
   border-radius: var(--radius);
-  cursor: pointer;
-  transition: border-color 0.15s ease;
+  overflow: hidden;
+  transition: border-color 0.15s;
 }
-
-.brand-asset-upload:hover {
+.brand-asset-card:hover {
   border-color: var(--accent);
 }
-
-.brand-asset-upload__icon {
-  width: 24px;
-  height: 24px;
+.brand-asset-card__base {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+}
+.brand-asset-card__icon {
+  width: 22px;
+  height: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--bg-hover);
   color: var(--text-dim);
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
+  flex-shrink: 0;
 }
-
-.brand-asset-upload__icon--done {
+.brand-asset-card__icon--done {
   background: rgba(74,222,128,0.15);
   color: var(--success);
 }
+.brand-asset-card__label {
+  font-size: 13px;
+  color: var(--text);
+  white-space: nowrap;
+}
 
-.brand-asset-row {
+/* Slide-in actions on hover */
+.brand-asset-card__actions,
+.brand-asset-card__manage {
   display: flex;
-  align-items: center;
-  gap: 4px;
+  max-width: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: max-width 0.2s ease, opacity 0.15s ease;
 }
-.brand-asset-actions {
-  display: flex;
-  gap: 2px;
+.brand-asset-card:hover > .brand-asset-card__actions:not(.hidden),
+.brand-asset-card:hover > .brand-asset-card__manage:not(.hidden) {
+  max-width: 180px;
+  opacity: 1;
 }
-.brand-asset-action {
-  background: none;
+
+.brand-asset-card__btn {
+  display: flex;
+  align-items: center;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 500;
   border: none;
-  color: var(--text-muted);
+  border-left: 1px solid var(--border);
+  background: var(--bg-hover);
+  color: var(--text-dim);
   cursor: pointer;
-  font-size: 14px;
-  padding: 2px 4px;
-  border-radius: var(--radius-sm);
-  transition: color 0.15s, background 0.15s;
+  white-space: nowrap;
+  transition: background 0.12s, color 0.12s;
 }
-.brand-asset-action:hover {
+.brand-asset-card__btn:hover {
+  background: var(--bg-active);
   color: var(--accent);
-  background: var(--bg-hover);
 }
-.brand-asset-action--delete:hover {
+.brand-asset-card__btn--danger:hover {
   color: var(--error);
 }
+/* Hide file input inside label */
+.brand-asset-card__btn input[type="file"] { display: none; }
 
-.brand-asset-upload__label {
-  font-size: 13px;
-  color: var(--text);
+/* Extracting state */
+.brand-asset-card--extracting {
+  opacity: 0.6;
+  pointer-events: none;
 }
 
 /* Back button in dashboard topbar */