vibespot 0.5.2 → 0.7.0

package/package.json

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

package/ui/chat.js

@@ -12,6 +12,9 @@ let streamingMsgEl = null;
 let streamBuffer = "";
 let streamStartTime = 0;
 let streamTimerInterval = null;
+let lastStreamStatus = "";
+let currentSessionId = "";
+let currentTemplateId = "";
 
 const messagesEl = document.getElementById("chat-messages");
 const inputEl = document.getElementById("chat-input");
@@ -64,6 +67,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 +109,6 @@ function handleWsMessage(msg) {
       break;
 
     case "stream":
-      clearStreamStatus();
       handleStreamChunk(msg.content);
       break;
 
@@ -199,6 +203,7 @@ function appendUserMessage(text, timestamp) {
 function startStreaming() {
   isStreaming = true;
   streamBuffer = "";
+  lastStreamStatus = "";
   sendBtn.disabled = true;
   streamStartTime = Date.now();
 
@@ -231,14 +236,32 @@ function handleStreamChunk(text) {
   if (!streamingMsgEl) return;
   streamBuffer += text;
 
-  // Render markdown-lite (code blocks, inline code, paragraphs)
-  streamingMsgEl.innerHTML = renderMarkdown(streamBuffer);
+  // 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 +334,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 +369,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>");
@@ -434,28 +456,46 @@ 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 = "";
+    list.innerHTML = toggleHtml;
     for (const commit of data.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,7 +504,7 @@ 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);
@@ -473,21 +513,38 @@ async function refreshHistoryPanel() {
     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 +1048,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);
   }
@@ -109,6 +122,77 @@ function renderTemplateList(templates) {
   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) => {
+    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);
+    });
+  });
+}
+
+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 +473,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/index.html

@@ -41,9 +41,15 @@
   <!-- ============================================================ -->
   <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">
+      <button class="topbar__icon-btn theme-toggle" title="Toggle light/dark mode" onclick="toggleTheme()">
+        <svg class="theme-toggle__icon--dark" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+        <svg class="theme-toggle__icon--light" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+      </button>
+    </div>
   </div>
   <div class="setup" id="setup-screen">
     <div class="setup__main">
@@ -134,12 +140,16 @@
           <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>
       </div>
       <div class="topbar__right">
+        <button class="topbar__icon-btn theme-toggle" title="Toggle light/dark mode" onclick="toggleTheme()">
+          <svg class="theme-toggle__icon--dark" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+          <svg class="theme-toggle__icon--light" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+        </button>
         <button class="topbar__icon-btn" id="dashboard-settings-btn" 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>
@@ -153,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">
@@ -257,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">
@@ -277,12 +297,13 @@
         </div>
       </div>
       <div class="topbar__right">
+        <button class="topbar__icon-btn theme-toggle" title="Toggle light/dark mode" onclick="toggleTheme()">
+          <svg class="theme-toggle__icon--dark" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+          <svg class="theme-toggle__icon--light" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+        </button>
         <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

package/ui/settings.js

@@ -810,6 +810,11 @@ async function authCLI(cli, btn, apiKey) {
 // ---------------------------------------------------------------------------
 
 function getModelsForEngine(engine) {
+  // Use server-provided model catalog if available
+  if (settingsData && settingsData.models && settingsData.models[engine]) {
+    return settingsData.models[engine];
+  }
+  // Fallback to hardcoded defaults
   switch (engine) {
     case "claude-code":
       return [
@@ -819,10 +824,9 @@ function getModelsForEngine(engine) {
       ];
     case "anthropic-api":
       return [
-        { id: "claude-sonnet-4-20250514", label: "Claude Sonnet 4 (default)" },
-        { id: "claude-opus-4-20250514", label: "Claude Opus 4" },
+        { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
+        { id: "claude-opus-4-6", label: "Claude Opus 4.6" },
         { id: "claude-haiku-4-5-20251001", label: "Claude Haiku 4.5" },
-        { id: "claude-sonnet-4-5-20250929", label: "Claude Sonnet 4.5" },
       ];
     case "openai-api":
       return [
@@ -834,9 +838,9 @@ function getModelsForEngine(engine) {
     case "gemini-cli":
     case "gemini-api":
       return [
-        { id: "gemini-2.0-flash", label: "Gemini 2.0 Flash (default)" },
+        { id: "gemini-2.5-flash", label: "Gemini 2.5 Flash (default)" },
         { id: "gemini-2.5-pro", label: "Gemini 2.5 Pro" },
-        { id: "gemini-2.5-flash", label: "Gemini 2.5 Flash" },
+        { id: "gemini-2.0-flash", label: "Gemini 2.0 Flash" },
       ];
     case "codex-cli":
       return [
@@ -852,7 +856,7 @@ 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-20250514";
+    case "anthropic-api": return config.anthropicApiModel || "claude-sonnet-4-6";
     case "openai-api": return config.openaiApiModel || "gpt-4o";
     default: return null;
   }
@@ -910,7 +914,6 @@ function escSettings(str) {
 // Event listeners
 // ---------------------------------------------------------------------------
 
-document.getElementById("btn-settings").addEventListener("click", openSettings);
 document.getElementById("settings-close").addEventListener("click", closeSettings);
 document.getElementById("settings-overlay").addEventListener("click", (e) => {
   if (e.target.id === "settings-overlay") closeSettings();