vibespot 0.6.0 → 0.7.1

package/package.json

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

package/ui/chat.js

@@ -12,6 +12,11 @@ let streamingMsgEl = null;
 let streamBuffer = "";
 let streamStartTime = 0;
 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");
@@ -44,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");
   };
 }
@@ -64,6 +73,8 @@ function handleWsMessage(msg) {
 
   switch (msg.type) {
     case "init":
+      currentSessionId = msg.sessionId || "";
+      currentTemplateId = msg.templateId || "";
       document.getElementById("theme-name").textContent = msg.themeName || "—";
 
       // Clear previous project's chat and module list
@@ -104,7 +115,6 @@ function handleWsMessage(msg) {
       break;
 
     case "stream":
-      clearStreamStatus();
       handleStreamChunk(msg.content);
       break;
 
@@ -199,6 +209,7 @@ function appendUserMessage(text, timestamp) {
 function startStreaming() {
   isStreaming = true;
   streamBuffer = "";
+  lastStreamStatus = "";
   sendBtn.disabled = true;
   streamStartTime = Date.now();
 
@@ -231,14 +242,42 @@ function handleStreamChunk(text) {
   if (!streamingMsgEl) return;
   streamBuffer += text;
 
-  // Render markdown-lite (code blocks, inline code, paragraphs)
-  streamingMsgEl.innerHTML = renderMarkdown(streamBuffer);
+  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;
+  if (fenceCount % 2 !== 0) {
+    const lastFence = display.lastIndexOf("```");
+    display = display.substring(0, lastFence);
+  }
+
+  const rendered = renderMarkdown(display);
+  const visibleText = rendered.replace(/<[^>]*>/g, "").trim();
+
+  if (visibleText) {
+    // Preserve the stream-status spinner while updating text
+    const statusEl = streamingMsgEl.querySelector(".stream-status");
+    streamingMsgEl.innerHTML = rendered;
+    if (statusEl) streamingMsgEl.appendChild(statusEl);
+  }
+  // No visible text — leave the spinner (.stream-status) untouched in the DOM
   scrollToBottom();
 }
 
 function handleStreamStatus(status) {
   if (!streamingMsgEl) startStreaming();
 
+  lastStreamStatus = status;
+
   // Find or create the status element inside the streaming bubble
   let statusEl = streamingMsgEl.querySelector(".stream-status");
   if (!statusEl) {
@@ -311,7 +350,9 @@ function finishStreaming() {
 
   // Final render of the full response
   if (streamingMsgEl && streamBuffer) {
-    streamingMsgEl.innerHTML = renderMarkdown(streamBuffer);
+    const rendered = renderMarkdown(streamBuffer);
+    const visibleText = rendered.replace(/<[^>]*>/g, "").trim();
+    streamingMsgEl.innerHTML = visibleText ? rendered : "<em>Modules applied.</em>";
   }
 
   streamingMsgEl = null;
@@ -344,13 +385,10 @@ function appendAssistantError(message) {
 // ---------------------------------------------------------------------------
 
 function renderMarkdown(text) {
-  // Hide vibespot-modules JSON blocks (they're data, not display)
-  text = text.replace(/```vibespot-modules[\s\S]*?```/g, "");
-
-  // Code blocks: ```lang\n...\n```
-  text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
-    return `<pre><code>${escapeHtml(code.trim())}</code></pre>`;
-  });
+  // Strip all code blocks — module code is applied via JSON, not displayed in chat
+  text = text.replace(/```[\s\S]*?```/g, "");
+  // Also strip unclosed code fences (truncated responses)
+  text = text.replace(/```[\s\S]*$/g, "");
 
   // Inline code: `...`
   text = text.replace(/`([^`]+)`/g, "<code>$1</code>");
@@ -388,7 +426,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) {
@@ -434,28 +481,50 @@ function toggleHistoryPanel() {
   if (historyPanelOpen) refreshHistoryPanel();
 }
 
+let historyShowAll = false;
+
 async function refreshHistoryPanel() {
   const list = document.getElementById("history-list");
   if (!list) return;
   list.innerHTML = '<div class="history__loading">Loading...</div>';
 
   try {
-    const res = await fetch("/api/history");
+    const useFilter = currentTemplateId && !historyShowAll;
+    const url = useFilter
+      ? `/api/history?templateId=${encodeURIComponent(currentTemplateId)}`
+      : "/api/history";
+    const res = await fetch(url);
     const data = await res.json();
 
     if (!data.available) {
       list.innerHTML = '<div class="history__empty">Git not available</div>';
       return;
     }
+
+    // Show all / filter toggle
+    const toggleHtml = currentTemplateId
+      ? `<div class="history__toggle"><button class="history__toggle-btn" id="history-toggle-filter">${historyShowAll ? "This template" : "Show all"}</button></div>`
+      : "";
+
     if (data.commits.length === 0) {
-      list.innerHTML = '<div class="history__empty">No versions yet</div>';
+      list.innerHTML = toggleHtml + '<div class="history__empty">No versions yet</div>';
+      attachHistoryToggle();
       return;
     }
 
-    list.innerHTML = "";
-    for (const commit of data.commits) {
+    list.innerHTML = toggleHtml;
+    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.startsWith("Rollback to:");
+      const isRollback = commit.message.includes("Rollback to:");
+
+      // Strip [templateId] prefix from display
+      let displayMsg = commit.message;
+      const prefixMatch = displayMsg.match(/^\[[^\]]+\]\s*/);
+      if (prefixMatch) displayMsg = displayMsg.slice(prefixMatch[0].length);
 
       const item = document.createElement("div");
       item.className = "history-item" + (isRollback ? " history-item--rollback" : "");
@@ -464,30 +533,55 @@ async function refreshHistoryPanel() {
           <span class="history-item__hash">${escapeHtml(commit.hash)}</span>
           <span class="history-item__date">${timeAgoShort(commit.timestamp)}</span>
         </div>
-        <div class="history-item__msg">${escapeHtml(commit.message)}</div>
+        <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) => {
       btn.addEventListener("click", () => doRollback(btn.dataset.hash));
     });
+    attachHistoryToggle();
   } catch {
     list.innerHTML = '<div class="history__empty">Error loading history</div>';
   }
 }
 
+function attachHistoryToggle() {
+  const btn = document.getElementById("history-toggle-filter");
+  if (btn) {
+    btn.addEventListener("click", () => {
+      historyShowAll = !historyShowAll;
+      refreshHistoryPanel();
+    });
+  }
+}
+
 async function doRollback(hash) {
-  const ok = await vibeConfirm("Restore this version?", "Your current files will be replaced, but chat history is preserved.", { confirmLabel: "Restore", confirmClass: "btn--primary" });
+  const scoped = currentTemplateId && !historyShowAll;
+  const msg = scoped
+    ? "This template's modules will be restored to the selected version. Other templates are not affected."
+    : "All theme files will be replaced, but chat history is preserved.";
+  const ok = await vibeConfirm("Restore this version?", msg, { confirmLabel: "Restore", confirmClass: "btn--primary" });
   if (!ok) return;
   setStatus("Rolling back...");
 
   try {
+    const payload = { hash };
+    if (scoped) payload.templateId = currentTemplateId;
     const res = await fetch("/api/rollback", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ hash }),
+      body: JSON.stringify(payload),
     });
     const data = await res.json();
 
@@ -991,6 +1085,83 @@ async function fetchHsAccountStatus() {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Topbar theme-name rename (double-click)
+// ---------------------------------------------------------------------------
+
+document.getElementById("theme-name")?.addEventListener("dblclick", () => {
+  const el = document.getElementById("theme-name");
+  if (!el || !currentSessionId) return;
+  if (el.contentEditable === "true") return;
+
+  const oldName = el.textContent.trim();
+  el.contentEditable = "true";
+  el.classList.add("topbar__project-pill--editing");
+  el.focus();
+
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  const sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+
+  function commit() {
+    el.contentEditable = "false";
+    el.classList.remove("topbar__project-pill--editing");
+
+    const newName = el.textContent.trim();
+    if (!newName || newName === oldName) {
+      el.textContent = oldName;
+      return;
+    }
+
+    fetch("/api/themes/rename", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ sessionId: currentSessionId, newName }),
+    })
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.ok) {
+          el.textContent = data.newName;
+          if (typeof currentAppTheme !== "undefined") currentAppTheme = data.newName;
+          window.location.hash = "#/app/" + encodeURIComponent(data.newName);
+          // Update rail item
+          const railItem = document.querySelector(`.project-rail__item[data-name="${oldName}"]`);
+          if (railItem) {
+            railItem.dataset.name = data.newName;
+            const nameSpan = railItem.querySelector(".project-rail__item-name");
+            if (nameSpan) nameSpan.textContent = data.newName;
+            const bubble = railItem.querySelector(".project-rail__item-bubble");
+            if (bubble) bubble.textContent = data.newName.charAt(0).toUpperCase();
+          }
+          if (typeof updateRailActive === "function") updateRailActive();
+        } else {
+          el.textContent = oldName;
+          showError(data.error || "Rename failed");
+        }
+      })
+      .catch(() => {
+        el.textContent = oldName;
+        showError("Rename failed");
+      });
+  }
+
+  el.addEventListener("blur", commit, { once: true });
+  el.addEventListener("keydown", function handler(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      el.removeEventListener("keydown", handler);
+      el.blur();
+    }
+    if (e.key === "Escape") {
+      el.textContent = oldName;
+      el.removeEventListener("keydown", handler);
+      el.blur();
+    }
+  });
+});
+
 // ---------------------------------------------------------------------------
 // Initialize
 // ---------------------------------------------------------------------------

package/ui/dashboard.js

@@ -25,6 +25,7 @@ const PAGE_TYPE_FULL_LABELS = {
 // ---------------------------------------------------------------------------
 
 let currentDashboardTheme = "";
+let currentDashboardSessionId = "";
 
 async function showDashboard(themeName) {
   currentDashboardTheme = themeName;
@@ -37,6 +38,15 @@ async function showDashboard(themeName) {
   dashboardScreen.classList.remove("hidden");
 
   document.getElementById("dashboard-theme-name").textContent = themeName;
+  document.getElementById("dashboard-theme-heading").textContent = themeName;
+  document.getElementById("dashboard-theme-path-text").textContent = "";
+
+  // Get sessionId for the active theme
+  try {
+    const themesRes = await fetch("/api/themes");
+    const themesData = await themesRes.json();
+    currentDashboardSessionId = themesData.activeTheme?.id || "";
+  } catch { currentDashboardSessionId = ""; }
 
   // Update URL
   const target = "#/dashboard/" + encodeURIComponent(themeName);
@@ -69,6 +79,9 @@ async function refreshDashboard() {
     renderTemplateList(data.templates || []);
     renderModuleLibrary(data.moduleLibrary || []);
     renderBrandAssets(data.brandAssets || {});
+    if (data.themePath) {
+      document.getElementById("dashboard-theme-path-text").textContent = data.themePath;
+    }
   } catch (err) {
     console.error("Failed to load dashboard:", err);
   }
@@ -102,12 +115,78 @@ 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));
+  // 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) startTemplateRename(labelEl, templateId);
+  };
+}
+
+function startTemplateRename(labelEl, templateId) {
+  if (labelEl.contentEditable === "true") return;
+
+  const oldLabel = labelEl.textContent.trim();
+  labelEl.contentEditable = "true";
+  labelEl.classList.add("dashboard__template-label--editing");
+  labelEl.focus();
+
+  const range = document.createRange();
+  range.selectNodeContents(labelEl);
+  const sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+
+  function commit() {
+    labelEl.contentEditable = "false";
+    labelEl.classList.remove("dashboard__template-label--editing");
+
+    const newLabel = labelEl.textContent.trim();
+    if (!newLabel || newLabel === oldLabel) {
+      labelEl.textContent = oldLabel;
+      return;
+    }
+
+    fetch("/api/templates/rename", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ templateId, newLabel }),
+    })
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.ok) {
+          labelEl.textContent = data.newLabel;
+        } else {
+          labelEl.textContent = oldLabel;
+          if (typeof showError === "function") showError(data.error || "Rename failed");
+        }
+      })
+      .catch(() => {
+        labelEl.textContent = oldLabel;
+        if (typeof showError === "function") showError("Rename failed");
+      });
+  }
+
+  labelEl.addEventListener("blur", commit, { once: true });
+  labelEl.addEventListener("keydown", function handler(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      labelEl.removeEventListener("keydown", handler);
+      labelEl.blur();
+    }
+    if (e.key === "Escape") {
+      labelEl.textContent = oldLabel;
+      labelEl.removeEventListener("keydown", handler);
+      labelEl.blur();
+    }
   });
 }
 
@@ -389,6 +468,111 @@ document.getElementById("brand-upload-brandvoice").querySelector("input").addEve
   if (e.target.files[0]) handleBrandFileSelected("brandvoice", e.target.files[0]);
 });
 
+// Dashboard theme heading — double-click to rename
+document.getElementById("dashboard-theme-heading")?.addEventListener("dblclick", () => {
+  const el = document.getElementById("dashboard-theme-heading");
+  if (!el || !currentDashboardSessionId) return;
+  if (el.contentEditable === "true") return;
+
+  const oldName = el.textContent.trim();
+  el.contentEditable = "true";
+  el.classList.add("dashboard__theme-heading--editing");
+  el.focus();
+
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  const sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+
+  function commit() {
+    el.contentEditable = "false";
+    el.classList.remove("dashboard__theme-heading--editing");
+
+    const newName = el.textContent.trim();
+    if (!newName || newName === oldName) {
+      el.textContent = oldName;
+      return;
+    }
+
+    fetch("/api/themes/rename", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ sessionId: currentDashboardSessionId, newName }),
+    })
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.ok) {
+          el.textContent = data.newName;
+          currentDashboardTheme = data.newName;
+          document.getElementById("dashboard-theme-name").textContent = data.newName;
+          window.location.hash = "#/dashboard/" + encodeURIComponent(data.newName);
+          // Update rail
+          const railItem = document.querySelector(`.project-rail__item[data-name="${oldName}"]`);
+          if (railItem) {
+            railItem.dataset.name = data.newName;
+            const nameSpan = railItem.querySelector(".project-rail__item-name");
+            if (nameSpan) nameSpan.textContent = data.newName;
+            const bubble = railItem.querySelector(".project-rail__item-bubble");
+            if (bubble) bubble.textContent = data.newName.charAt(0).toUpperCase();
+          }
+          if (typeof updateRailActive === "function") updateRailActive();
+        } else {
+          el.textContent = oldName;
+          if (typeof showError === "function") showError(data.error || "Rename failed");
+        }
+      })
+      .catch(() => {
+        el.textContent = oldName;
+        if (typeof showError === "function") showError("Rename failed");
+      });
+  }
+
+  el.addEventListener("blur", commit, { once: true });
+  el.addEventListener("keydown", function handler(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      el.removeEventListener("keydown", handler);
+      el.blur();
+    }
+    if (e.key === "Escape") {
+      el.textContent = oldName;
+      el.removeEventListener("keydown", handler);
+      el.blur();
+    }
+  });
+});
+
+// Download ZIP button
+document.getElementById("dashboard-download-zip").addEventListener("click", async () => {
+  const btn = document.getElementById("dashboard-download-zip");
+  const origHTML = btn.innerHTML;
+  btn.disabled = true;
+  btn.querySelector("span").textContent = "Downloading...";
+
+  try {
+    const res = await fetch("/api/download-zip");
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: "Download failed" }));
+      throw new Error(err.error || "Download failed");
+    }
+    const blob = await res.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = (currentDashboardTheme || "theme") + ".zip";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  } catch (err) {
+    if (typeof vibeAlert === "function") vibeAlert(err.message, "Error");
+  } finally {
+    btn.disabled = false;
+    btn.innerHTML = origHTML;
+  }
+});
+
 // Humanify toggle
 const humanifyCheckbox = document.getElementById("humanify-checkbox");
 if (humanifyCheckbox) {

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

@@ -41,7 +41,7 @@
   <!-- ============================================================ -->
   <div class="setup-topbar" id="setup-topbar">
     <div class="topbar__brand">
-      <div class="topbar__logo-icon">v</div>
+      <div class="topbar__logo-icon"><svg viewBox="0 0 512 512" width="18" height="18"><path d="M256 76 Q280 220 436 256 Q280 292 256 436 Q232 292 76 256 Q232 220 256 76 Z" fill="currentColor"/></svg></div>
       <span class="topbar__brand-name">vibeSpot</span>
     </div>
     <div style="margin-left:auto">
@@ -140,7 +140,7 @@
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
         </button>
         <div class="topbar__brand">
-          <div class="topbar__logo-icon">v</div>
+          <div class="topbar__logo-icon"><svg viewBox="0 0 512 512" width="18" height="18"><path d="M256 76 Q280 220 436 256 Q280 292 256 436 Q232 292 76 256 Q232 220 256 76 Z" fill="currentColor"/></svg></div>
           <span class="topbar__brand-name">vibeSpot</span>
         </div>
         <span class="topbar__project-pill" id="dashboard-theme-name"></span>
@@ -163,6 +163,17 @@
     <div class="dashboard__body">
       <div class="dashboard__container">
 
+        <h1 class="dashboard__theme-heading" id="dashboard-theme-heading"></h1>
+
+        <div class="dashboard__theme-path" id="dashboard-theme-path">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="flex-shrink:0"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+          <span class="dashboard__theme-path-text" id="dashboard-theme-path-text"></span>
+          <button class="dashboard__download-btn" id="dashboard-download-zip" title="Download theme as ZIP">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+            <span>Download ZIP</span>
+          </button>
+        </div>
+
         <!-- Brand Assets -->
         <section class="dashboard__section">
           <div class="dashboard__section-header">
@@ -267,10 +278,9 @@
   <div class="app hidden" id="app-screen">
     <header class="topbar">
       <div class="topbar__left">
-        <div class="topbar__brand">
-          <div class="topbar__logo-icon">v</div>
-          <span class="topbar__brand-name">vibeSpot</span>
-        </div>
+        <button class="topbar__back-btn" id="app-back" title="Back to theme overview">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
+        </button>
         <span class="topbar__project-pill" id="theme-name"></span>
       </div>
       <div class="topbar__center">
@@ -294,9 +304,6 @@
         <button class="topbar__icon-btn" id="btn-history" title="Version History" style="display:none">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
         </button>
-        <button class="topbar__icon-btn" id="btn-settings" title="Settings">
-          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M7.5 1.5h3l.4 2.1a5.5 5.5 0 0 1 1.3.7l2-.8 1.5 2.6-1.6 1.3a5.5 5.5 0 0 1 0 1.5l1.6 1.3-1.5 2.6-2-.8a5.5 5.5 0 0 1-1.3.7l-.4 2.1h-3l-.4-2.1a5.5 5.5 0 0 1-1.3-.7l-2 .8-1.5-2.6 1.6-1.3a5.5 5.5 0 0 1 0-1.5L2.3 6.1l1.5-2.6 2 .8a5.5 5.5 0 0 1 1.3-.7L7.5 1.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="9" cy="9" r="2" stroke="currentColor" stroke-width="1.5"/></svg>
-        </button>
         <button class="btn btn--primary" id="btn-upload" title="Deploy theme to HubSpot">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:4px;vertical-align:-2px"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
           Deploy