vibespot 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibespot",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "AI-powered HubSpot CMS landing page builder — vibe coding & React converter",
   "type": "module",
   "bin": {
@@ -21,12 +21,16 @@
   "dependencies": {
     "@anthropic-ai/sdk": "^0.39.0",
     "@clack/prompts": "^0.9.1",
+    "busboy": "^1.6.0",
     "chalk": "^5.4.1",
     "commander": "^13.1.0",
     "execa": "^9.5.2",
+    "mammoth": "^1.11.0",
+    "pdf-parse": "^2.4.5",
     "ws": "^8.19.0"
   },
   "devDependencies": {
+    "@types/busboy": "^1.5.4",
     "@types/node": "^22.0.0",
     "@types/ws": "^8.18.1",
     "tsup": "^8.4.0",

package/ui/chat.js

@@ -15,6 +15,8 @@ let streamTimerInterval = null;
 let lastStreamStatus = "";
 let currentSessionId = "";
 let currentTemplateId = "";
+let renderScheduled = false;
+let scrollScheduled = false;
 
 const messagesEl = document.getElementById("chat-messages");
 const inputEl = document.getElementById("chat-input");
@@ -47,11 +49,15 @@ function connectWebSocket() {
   };
 
   ws.onclose = () => {
+    stopStreamTimer();
+    if (isStreaming) finishStreaming();
     setStatus("Disconnected — reconnecting...");
     setTimeout(connectWebSocket, 2000);
   };
 
   ws.onerror = () => {
+    stopStreamTimer();
+    if (isStreaming) finishStreaming();
     setStatus("Connection error");
   };
 }
@@ -147,25 +153,191 @@ function handleWsMessage(msg) {
   }
 }
 
+// ---------------------------------------------------------------------------
+// File attachments
+// ---------------------------------------------------------------------------
+
+const pendingFiles = [];
+const fileChipsEl = document.getElementById("file-chips");
+const fileInputEl = document.getElementById("file-input");
+const attachBtn = document.getElementById("btn-attach-file");
+const dropOverlay = document.getElementById("drop-overlay");
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+
+const IMAGE_TYPES = new Set(["image/png", "image/jpeg", "image/svg+xml", "image/webp", "image/gif"]);
+const DOC_TYPES = new Set([
+  "application/pdf",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "text/markdown", "text/plain",
+]);
+const SUPPORTED_TYPES = new Set([...IMAGE_TYPES, ...DOC_TYPES]);
+
+function addPendingFile(file) {
+  if (!SUPPORTED_TYPES.has(file.type)) {
+    showToast(`Unsupported file type: ${file.name}`);
+    return;
+  }
+  if (file.size > MAX_FILE_SIZE) {
+    showToast(`File too large (>10MB): ${file.name}`);
+    return;
+  }
+  pendingFiles.push(file);
+  renderFileChips();
+}
+
+function removePendingFile(index) {
+  pendingFiles.splice(index, 1);
+  renderFileChips();
+}
+
+function renderFileChips() {
+  fileChipsEl.innerHTML = "";
+  if (pendingFiles.length === 0) {
+    fileChipsEl.classList.remove("visible");
+    return;
+  }
+  fileChipsEl.classList.add("visible");
+  pendingFiles.forEach((file, i) => {
+    const isImage = IMAGE_TYPES.has(file.type);
+    const chip = document.createElement("div");
+    chip.className = `file-chip file-chip--${isImage ? "image" : "doc"}`;
+    const sizeKB = Math.round(file.size / 1024);
+    const sizeStr = sizeKB > 1024 ? `${(sizeKB / 1024).toFixed(1)} MB` : `${sizeKB} KB`;
+    chip.innerHTML = `
+      <span class="file-chip__icon">${isImage ? "\u{1F5BC}" : "\u{1F4C4}"}</span>
+      <span class="file-chip__name">${escapeHtml(file.name)}</span>
+      <span class="file-chip__size">${sizeStr}</span>
+      <button class="file-chip__remove" title="Remove">&times;</button>
+    `;
+    chip.querySelector(".file-chip__remove").addEventListener("click", () => removePendingFile(i));
+    fileChipsEl.appendChild(chip);
+  });
+}
+
+function showToast(message) {
+  const toast = document.createElement("div");
+  toast.className = "toast";
+  toast.textContent = message;
+  document.body.appendChild(toast);
+  setTimeout(() => toast.classList.add("visible"), 10);
+  setTimeout(() => {
+    toast.classList.remove("visible");
+    setTimeout(() => toast.remove(), 300);
+  }, 3000);
+}
+
+async function uploadFiles(files) {
+  const formData = new FormData();
+  for (const file of files) {
+    formData.append("files", file);
+  }
+  const resp = await fetch("/api/upload-files", { method: "POST", body: formData });
+  if (!resp.ok) {
+    const err = await resp.json().catch(() => ({ error: "Upload failed" }));
+    throw new Error(err.error || "Upload failed");
+  }
+  return resp.json();
+}
+
+function renderFileChipsInMessage(files) {
+  if (!files || files.length === 0) return "";
+  return `<div class="chat-msg__files">${files
+    .map((f) => {
+      const isImage = f.type === "image";
+      return `<span class="file-chip file-chip--${isImage ? "image" : "doc"} file-chip--sent">
+        <span class="file-chip__icon">${isImage ? "\u{1F5BC}" : "\u{1F4C4}"}</span>
+        <span class="file-chip__name">${escapeHtml(f.originalName || f.name)}</span>
+      </span>`;
+    })
+    .join("")}</div>`;
+}
+
+// Drag-and-drop
+let dragCounter = 0;
+
+inputEl.closest(".chat__input-area").addEventListener("dragenter", (e) => {
+  e.preventDefault();
+  dragCounter++;
+  dropOverlay.classList.remove("hidden");
+});
+
+inputEl.closest(".chat__input-area").addEventListener("dragleave", (e) => {
+  e.preventDefault();
+  dragCounter--;
+  if (dragCounter <= 0) {
+    dragCounter = 0;
+    dropOverlay.classList.add("hidden");
+  }
+});
+
+inputEl.closest(".chat__input-area").addEventListener("dragover", (e) => {
+  e.preventDefault();
+});
+
+inputEl.closest(".chat__input-area").addEventListener("drop", (e) => {
+  e.preventDefault();
+  dragCounter = 0;
+  dropOverlay.classList.add("hidden");
+  if (e.dataTransfer?.files) {
+    for (const file of e.dataTransfer.files) {
+      addPendingFile(file);
+    }
+  }
+});
+
+// Paperclip button
+attachBtn.addEventListener("click", () => fileInputEl.click());
+fileInputEl.addEventListener("change", () => {
+  for (const file of fileInputEl.files) {
+    addPendingFile(file);
+  }
+  fileInputEl.value = "";
+});
+
 // ---------------------------------------------------------------------------
 // Sending messages
 // ---------------------------------------------------------------------------
 
-function sendMessage(text) {
-  if (!text.trim() || isStreaming || !ws || ws.readyState !== WebSocket.OPEN) return;
+async function sendMessage(text) {
+  const hasFiles = pendingFiles.length > 0;
+  if ((!text.trim() && !hasFiles) || isStreaming || !ws || ws.readyState !== WebSocket.OPEN) return;
 
   // Remove welcome screen
   const welcome = messagesEl.querySelector(".chat__welcome");
   if (welcome) welcome.remove();
 
-  // Show user message
-  appendUserMessage(text);
+  // Upload files first if any
+  let uploadedFiles = [];
+  const filesToUpload = [...pendingFiles];
+  if (hasFiles) {
+    pendingFiles.length = 0;
+    renderFileChips();
+    setStatus("Uploading files...");
+    try {
+      const result = await uploadFiles(filesToUpload);
+      uploadedFiles = result.files || [];
+      if (result.errors?.length) {
+        result.errors.forEach((e) => showToast(e));
+      }
+    } catch (err) {
+      showToast(err.message);
+      setStatus("Upload failed");
+      return;
+    }
+  }
+
+  // Show user message with file chips
+  appendUserMessage(text, null, uploadedFiles);
 
   // Start streaming indicator
   startStreaming();
 
-  // Send via WebSocket
-  ws.send(JSON.stringify({ type: "chat", message: text }));
+  // Send via WebSocket with file IDs
+  const payload = { type: "chat", message: text || "(files attached)" };
+  if (uploadedFiles.length > 0) {
+    payload.fileIds = uploadedFiles.map((f) => f.id);
+  }
+  ws.send(JSON.stringify(payload));
 
   // Clear input
   inputEl.value = "";
@@ -183,10 +355,11 @@ function formatMessageTime(ts) {
   return `${d.getHours()}:${d.getMinutes().toString().padStart(2, "0")}`;
 }
 
-function appendUserMessage(text, timestamp) {
+function appendUserMessage(text, timestamp, files) {
   const time = formatMessageTime(timestamp || Date.now());
   const div = document.createElement("div");
   div.className = "chat-msg chat-msg--user";
+  const fileChipsHtml = renderFileChipsInMessage(files);
   div.innerHTML = `
     <div class="chat-msg__avatar chat-msg__avatar--user">Y</div>
     <div class="chat-msg__content">
@@ -194,6 +367,7 @@ function appendUserMessage(text, timestamp) {
         <span class="chat-msg__sender">You</span>
         <span class="chat-msg__time">${time}</span>
       </div>
+      ${fileChipsHtml}
       <div class="chat-msg__bubble">${escapeHtml(text)}</div>
     </div>`;
   messagesEl.appendChild(div);
@@ -236,6 +410,16 @@ function handleStreamChunk(text) {
   if (!streamingMsgEl) return;
   streamBuffer += text;
 
+  if (!renderScheduled) {
+    renderScheduled = true;
+    requestAnimationFrame(flushStreamRender);
+  }
+}
+
+function flushStreamRender() {
+  renderScheduled = false;
+  if (!streamingMsgEl) return;
+
   // Hide incomplete code fences (AI is writing module code)
   let display = streamBuffer;
   const fenceCount = (display.match(/```/g) || []).length;
@@ -410,7 +594,16 @@ function escapeHtml(str) {
 }
 
 function scrollToBottom() {
-  messagesEl.scrollTop = messagesEl.scrollHeight;
+  if (scrollScheduled) return;
+  scrollScheduled = true;
+  requestAnimationFrame(() => {
+    scrollScheduled = false;
+    // Only auto-scroll if user is near the bottom (within 150px)
+    const gap = messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight;
+    if (gap < 150) {
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+  });
 }
 
 function setStatus(text) {
@@ -488,7 +681,11 @@ async function refreshHistoryPanel() {
     }
 
     list.innerHTML = toggleHtml;
-    for (const commit of data.commits) {
+    const HISTORY_LIMIT = 50;
+    const commits = data.commits.slice(0, HISTORY_LIMIT);
+    const frag = document.createDocumentFragment();
+
+    for (const commit of commits) {
       const isInitial = commit.message.startsWith("Initial ");
       const isRollback = commit.message.includes("Rollback to:");
 
@@ -507,7 +704,15 @@ async function refreshHistoryPanel() {
         <div class="history-item__msg">${escapeHtml(displayMsg)}</div>
         ${!isInitial ? `<button class="history-item__rollback" data-hash="${escapeHtml(commit.fullHash)}">Restore</button>` : ""}
       `;
-      list.appendChild(item);
+      frag.appendChild(item);
+    }
+    list.appendChild(frag);
+
+    if (data.commits.length > HISTORY_LIMIT) {
+      const more = document.createElement("div");
+      more.className = "history__show-more";
+      more.textContent = `Showing ${HISTORY_LIMIT} of ${data.commits.length} versions`;
+      list.appendChild(more);
     }
 
     list.querySelectorAll(".history-item__rollback").forEach((btn) => {

package/ui/dashboard.js

@@ -115,25 +115,20 @@ function renderTemplateList(templates) {
     list.appendChild(item);
   }
 
-  // Attach click handlers
-  list.querySelectorAll(".dashboard__template-open").forEach((btn) => {
-    btn.addEventListener("click", () => openTemplate(btn.dataset.id));
-  });
-  list.querySelectorAll(".dashboard__template-delete").forEach((btn) => {
-    btn.addEventListener("click", () => confirmDeleteTemplate(btn.dataset.id));
-  });
-
-  // Double-click on label to rename
-  list.querySelectorAll(".dashboard__template-label").forEach((labelEl) => {
+  // Event delegation — single listener handles all template actions
+  list.onclick = (e) => {
+    const openBtn = e.target.closest(".dashboard__template-open");
+    if (openBtn) return openTemplate(openBtn.dataset.id);
+    const delBtn = e.target.closest(".dashboard__template-delete");
+    if (delBtn) return confirmDeleteTemplate(delBtn.dataset.id);
+  };
+  list.ondblclick = (e) => {
+    const labelEl = e.target.closest(".dashboard__template-label");
+    if (!labelEl) return;
     const item = labelEl.closest(".dashboard__template-item");
     const templateId = item?.querySelector(".dashboard__template-open")?.dataset.id;
-    if (!templateId) return;
-
-    labelEl.addEventListener("dblclick", (e) => {
-      e.stopPropagation();
-      startTemplateRename(labelEl, templateId);
-    });
-  });
+    if (templateId) startTemplateRename(labelEl, templateId);
+  };
 }
 
 function startTemplateRename(labelEl, templateId) {

package/ui/dialog.js

@@ -6,10 +6,9 @@
 // HTML-escape helper (standalone so dialog.js has no load-order dependency)
 if (typeof esc === "undefined") {
   // eslint-disable-next-line no-var
+  var _escMap = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
   var esc = function (str) {
-    const el = document.createElement("span");
-    el.textContent = String(str);
-    return el.innerHTML;
+    return String(str).replace(/[&<>"']/g, function (c) { return _escMap[c]; });
   };
 }
 

package/ui/field-editor.js

@@ -38,6 +38,7 @@ async function openFieldEditor(moduleName) {
 }
 
 function closeFieldEditor() {
+  if (updateTimer) { clearTimeout(updateTimer); updateTimer = null; }
   currentEditModule = null;
   if (typeof showModuleListView === "function") {
     showModuleListView();

package/ui/index.html

@@ -70,53 +70,63 @@
         <!-- Settings link (hidden — now in sidebar footer) -->
         <div class="setup__settings-link hidden" id="setup-settings-link"></div>
 
-        <!-- Main options -->
+        <!-- Main action buttons -->
         <div class="setup__options" id="setup-options">
-          <!-- Previous sessions (hidden — now shown in sidebar) -->
-          <div class="setup__section hidden" id="section-recent">
-            <div class="setup__cards" id="recent-sessions"></div>
-          </div>
-
-          <!-- Local themes (hidden — now shown in sidebar) -->
-          <div class="setup__section hidden" id="section-local">
-            <div class="setup__cards" id="local-themes"></div>
+          <div class="setup__actions">
+            <button class="setup__action-btn" data-action="new">
+              <span class="setup__action-icon">&#43;</span>
+              <span>New Theme</span>
+            </button>
+            <button class="setup__action-btn" data-action="continue">
+              <span class="setup__action-icon">&#9654;</span>
+              <span>Continue</span>
+            </button>
+            <button class="setup__action-btn" data-action="download">
+              <span class="setup__action-icon">&#8595;</span>
+              <span>From HubSpot</span>
+            </button>
+            <button class="setup__action-btn" data-action="convert">
+              <span class="setup__action-icon">&#8634;</span>
+              <span>Convert React</span>
+              <span class="setup__action-badge">Experimental</span>
+            </button>
           </div>
 
-          <!-- Create new -->
-          <div class="setup__section">
-            <p class="setup__label">Start a new project</p>
+          <!-- Expandable panels (one visible at a time) -->
+          <div class="setup__panel hidden" id="panel-new">
             <div class="setup__row">
               <input type="text" class="setup__input setup__input--wide" id="new-theme-name" placeholder="my-landing-page" />
               <button class="btn btn--primary" id="btn-create-theme">Create</button>
             </div>
           </div>
 
-          <!-- Fetch from HubSpot (only shown if hs is installed) -->
-          <div class="setup__section hidden" id="section-fetch">
-            <p class="setup__label">Download from HubSpot</p>
-            <div class="setup__row">
-              <input type="text" class="setup__input setup__input--wide" id="fetch-theme-name" placeholder="theme-name-in-hubspot" />
-              <button class="btn btn--secondary" id="btn-fetch-theme">Fetch</button>
-            </div>
+          <div class="setup__panel hidden" id="panel-continue">
+            <div class="setup__pills" id="continue-projects"></div>
+            <p class="setup__hint setup__hint--empty hidden" id="continue-empty">No themes yet — create one above!</p>
           </div>
 
-          <!-- Import from GitHub -->
-          <div class="setup__section">
-            <p class="setup__label">Import from GitHub</p>
-            <div class="setup__row">
-              <input type="text" class="setup__input setup__input--wide" id="import-url" placeholder="https://github.com/user/my-landing-page" />
-              <button class="btn btn--secondary" id="import-btn">Import</button>
+          <div class="setup__panel hidden" id="panel-download">
+            <div class="setup__panel-account hidden" id="dl-account">
+              <span id="dl-account-name"></span>
+              <button class="btn-link" id="dl-account-change">Change</button>
+            </div>
+            <div id="dl-account-switch" class="hidden" style="margin:0 0 12px"></div>
+            <div class="setup__row hidden" id="dl-input-row">
+              <input type="text" class="setup__input setup__input--wide" id="dl-theme-name" placeholder="Enter theme folder name on HubSpot" />
+              <button class="btn btn--primary" id="btn-fetch-theme">Download</button>
+            </div>
+            <p class="setup__hint hidden" id="dl-hint">Enter the exact folder name of your theme in the HubSpot Design Manager</p>
+            <div class="hidden" id="dl-no-account">
+              <p class="setup__hint">Connect a HubSpot account in <a href="#" id="dl-open-settings">Settings</a> to download themes.</p>
             </div>
-            <p class="setup__hint">Convert a React/Lovable project to HubSpot</p>
           </div>
 
-          <!-- Open folder -->
-          <div class="setup__section">
-            <p class="setup__label">Open from disk</p>
+          <div class="setup__panel hidden" id="panel-convert">
             <div class="setup__row">
-              <input type="text" class="setup__input setup__input--wide" id="open-theme-path" placeholder="/path/to/my-theme" />
-              <button class="btn btn--secondary" id="btn-open-theme">Open</button>
+              <input type="text" class="setup__input setup__input--wide" id="import-url" placeholder="https://github.com/user/repo or Lovable URL" />
+              <button class="btn btn--primary" id="import-btn">Import</button>
             </div>
+            <p class="setup__hint">Convert a React or Lovable project to a HubSpot theme</p>
           </div>
         </div>
 
@@ -361,9 +371,14 @@
             </div>
           </div>
           <div class="chat__input-area">
+            <div class="chat__file-chips" id="file-chips"></div>
             <div class="chat__input-wrapper">
               <textarea class="chat__input" id="chat-input" placeholder="Describe your landing page..." rows="1"></textarea>
               <div class="chat__input-actions">
+                <button class="chat__input-icon" id="btn-attach-file" title="Attach files (images, PDFs, docs)">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>
+                </button>
+                <input type="file" id="file-input" multiple accept="image/png,image/jpeg,image/svg+xml,image/webp,image/gif,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,text/markdown,text/plain" style="display:none">
                 <button class="chat__input-icon" id="btn-starter-templates" title="Templates">
                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
                 </button>
@@ -372,6 +387,12 @@
                 </button>
               </div>
             </div>
+            <div class="chat__drop-overlay hidden" id="drop-overlay">
+              <div class="chat__drop-overlay-content">
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+                <span>Drop files here</span>
+              </div>
+            </div>
           </div>
         </div>
       </aside>
@@ -430,6 +451,12 @@
         <h2 class="settings__title">Settings</h2>
         <button class="settings__close" id="settings-close">&times;</button>
       </div>
+      <div class="settings__tabs" id="settings-tabs">
+        <button class="settings__tab active" data-tab="ai">AI</button>
+        <button class="settings__tab" data-tab="hubspot">HubSpot</button>
+        <button class="settings__tab" data-tab="github">GitHub</button>
+        <button class="settings__tab" data-tab="vibespot">vibeSpot</button>
+      </div>
       <div class="settings__body" id="settings-body">
         <!-- Populated dynamically by settings.js -->
         <div class="settings__loading">