vibespot 1.2.0 → 1.3.0

package/ui/chat.js

@@ -34,6 +34,10 @@ const inputEl = document.getElementById("chat-input");
 const sendBtn = document.getElementById("chat-send");
 const statusText = document.getElementById("status-text");
 const statusEngine = document.getElementById("status-engine");
+const statusTheme = document.getElementById("status-theme");
+const statusLastSaved = document.getElementById("status-last-saved");
+
+let lastSavedAt = 0;
 
 // Snapshot the welcome section before any init can destroy it
 const _welcomeHtml = document.getElementById("chat-welcome")?.outerHTML || "";
@@ -41,15 +45,480 @@ const _welcomeHtml = document.getElementById("chat-welcome")?.outerHTML || "";
 function restoreWelcome() {
   if (!_welcomeHtml || messagesEl.querySelector(".chat__welcome")) return;
   messagesEl.insertAdjacentHTML("afterbegin", _welcomeHtml);
-  const el = messagesEl.querySelector("#starter-templates");
-  if (el) {
-    el.addEventListener("click", (e) => {
-      const btn = e.target.closest(".starter-btn");
-      if (btn) sendMessage(btn.dataset.prompt);
-    });
+  const el = messagesEl.querySelector("#conversation-starters");
+  if (el) el.addEventListener("click", handleConversationStarterClick);
+}
+
+function handleConversationStarterClick(e) {
+  const btn = e.target.closest(".starter-btn");
+  if (!btn) return;
+  const action = btn.dataset.action;
+  if (action === "describe") {
+    inputEl?.focus();
+  } else if (action === "figma") {
+    document.getElementById("btn-attach-file")?.click();
+  } else if (action === "hubspot-import") {
+    if (inputEl) {
+      inputEl.value = "Import this HubSpot page and adapt it: ";
+      inputEl.style.height = "auto";
+      inputEl.style.height = Math.min(inputEl.scrollHeight, 150) + "px";
+      inputEl.focus();
+      const end = inputEl.value.length;
+      inputEl.setSelectionRange(end, end);
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Page tabs (multi-page template switcher)
+// ---------------------------------------------------------------------------
+
+let currentTemplates = [];
+let pageDragSourceId = null;
+
+const PAGE_TYPE_BADGES = {
+  landing_page: "LP",
+  blog_post: "Blog",
+  website_page: "Web",
+  email: "Email",
+  module_only: "Sec",
+};
+
+// Inline SVG icons keyed by page type. Stroke-only so they inherit currentColor.
+const PAGE_TYPE_ICONS = {
+  landing_page: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><line x1="4" y1="9" x2="20" y2="9"/><line x1="9" y1="13" x2="15" y2="13"/></svg>',
+  website_page: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><circle cx="6" cy="7" r="0.6" fill="currentColor"/><circle cx="8.4" cy="7" r="0.6" fill="currentColor"/></svg>',
+  blog_post: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h11l3 3v13H5z"/><line x1="8" y1="11" x2="16" y2="11"/><line x1="8" y1="15" x2="14" y2="15"/></svg>',
+  email: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><polyline points="3,7 12,13 21,7"/></svg>',
+  module_only: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="6" width="16" height="4" rx="1"/><rect x="4" y="14" width="10" height="4" rx="1"/></svg>',
+};
+
+const PAGE_TYPE_LABEL_LONG = {
+  landing_page: "Landing page",
+  website_page: "Website page",
+  blog_post: "Blog post",
+  email: "Email",
+  module_only: "Section",
+};
+
+function renderPageTabs(templates, activeTemplateId) {
+  const list = document.getElementById("page-tabs-list");
+  if (!list) return;
+
+  currentTemplates = templates || [];
+
+  list.innerHTML = currentTemplates.map((t) => {
+    const isActive = t.id === activeTemplateId;
+    const badge = PAGE_TYPE_BADGES[t.pageType] || "";
+    const icon = PAGE_TYPE_ICONS[t.pageType] || PAGE_TYPE_ICONS.website_page;
+    const typeLabel = PAGE_TYPE_LABEL_LONG[t.pageType] || t.pageType;
+    const titleAttr = `${t.label} — ${typeLabel} (${t.moduleCount} modules)`;
+    return `<div class="page-tabs__row${isActive ? " page-tabs__row--active" : ""}" role="treeitem" aria-selected="${isActive ? "true" : "false"}" data-template-id="${t.id}" draggable="true" title="${escapeHtml(titleAttr)}">
+      <span class="page-tabs__handle" aria-hidden="true" title="Drag to reorder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="18" r="1"/></svg></span>
+      <button class="page-tabs__tab" type="button" data-template-id="${t.id}" data-action="activate">
+        <span class="page-tabs__icon" aria-hidden="true">${icon}</span>
+        ${badge ? `<span class="page-tabs__tab-badge">${badge}</span>` : ""}
+        <span class="page-tabs__tab-label">${escapeHtml(t.label)}</span>
+        <span class="page-tabs__tab-count">${t.moduleCount}</span>
+      </button>
+      <button class="page-tabs__menu-btn" type="button" data-template-id="${t.id}" data-action="menu" title="Page actions" aria-label="Page actions" aria-haspopup="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="6" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="18" r="1"/></svg></button>
+    </div>`;
+  }).join("");
+}
+
+function refreshPageTabs() {
+  return fetch("/api/templates")
+    .then((res) => (res.ok ? res.json() : null))
+    .then((data) => {
+      if (!data) return;
+      currentTemplateId = data.activeTemplateId || currentTemplateId;
+      renderPageTabs(data.templates || [], currentTemplateId);
+    })
+    .catch(() => {});
+}
+
+function handlePageTabClick(e) {
+  const menuBtn = e.target.closest(".page-tabs__menu-btn");
+  if (menuBtn) {
+    e.preventDefault();
+    e.stopPropagation();
+    openPageContextMenu(menuBtn.dataset.templateId, menuBtn);
+    return;
+  }
+  const tab = e.target.closest(".page-tabs__tab");
+  if (!tab) return;
+  const templateId = tab.dataset.templateId;
+  if (!templateId || templateId === currentTemplateId) return;
+  if (isStreaming) return;
+
+  tab.style.opacity = "0.5";
+  fetch("/api/templates/activate", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ templateId }),
+  }).then((res) => {
+    if (!res.ok) {
+      tab.style.opacity = "";
+      return;
+    }
+    connectWebSocket();
+  }).catch(() => {
+    tab.style.opacity = "";
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Page tree context menu (right-click / kebab) — Edit, Duplicate, Delete, Move
+// ---------------------------------------------------------------------------
+
+function handlePageTabContextMenu(e) {
+  const row = e.target.closest(".page-tabs__row");
+  if (!row) return;
+  e.preventDefault();
+  openPageContextMenu(row.dataset.templateId, e);
+}
+
+function openPageContextMenu(templateId, anchor) {
+  closePageContextMenu();
+  if (!templateId) return;
+  const template = currentTemplates.find((t) => t.id === templateId);
+  if (!template) return;
+
+  const idx = currentTemplates.findIndex((t) => t.id === templateId);
+  const canMoveUp = idx > 0;
+  const canMoveDown = idx >= 0 && idx < currentTemplates.length - 1;
+
+  const menu = document.createElement("div");
+  menu.className = "page-tree__context-menu";
+  menu.id = "page-context-menu";
+  menu.setAttribute("role", "menu");
+  menu.innerHTML = [
+    `<button type="button" role="menuitem" data-action="edit">Edit name…</button>`,
+    `<button type="button" role="menuitem" data-action="duplicate">Duplicate</button>`,
+    `<div class="page-tree__context-sep" role="separator"></div>`,
+    `<button type="button" role="menuitem" data-action="move-up"${canMoveUp ? "" : " disabled"}>Move up</button>`,
+    `<button type="button" role="menuitem" data-action="move-down"${canMoveDown ? "" : " disabled"}>Move down</button>`,
+    `<div class="page-tree__context-sep" role="separator"></div>`,
+    `<button type="button" role="menuitem" data-action="delete" class="page-tree__context-menu-danger">Delete…</button>`,
+  ].join("");
+  document.body.appendChild(menu);
+
+  // Position the menu. Anchor can be a MouseEvent or an HTMLElement.
+  let x = 0;
+  let y = 0;
+  if (anchor instanceof Event) {
+    x = anchor.clientX;
+    y = anchor.clientY;
+  } else if (anchor && anchor.getBoundingClientRect) {
+    const r = anchor.getBoundingClientRect();
+    x = r.right;
+    y = r.bottom;
+  }
+  // Constrain to viewport.
+  const menuRect = menu.getBoundingClientRect();
+  if (x + menuRect.width > window.innerWidth - 8) x = Math.max(8, window.innerWidth - menuRect.width - 8);
+  if (y + menuRect.height > window.innerHeight - 8) y = Math.max(8, window.innerHeight - menuRect.height - 8);
+  menu.style.left = `${x}px`;
+  menu.style.top = `${y}px`;
+
+  menu.addEventListener("click", (e) => {
+    const btn = e.target.closest("button[data-action]");
+    if (!btn || btn.disabled) return;
+    const action = btn.dataset.action;
+    closePageContextMenu();
+    runPageAction(templateId, action);
+  });
+
+  // Dismiss on outside click / scroll / Escape.
+  setTimeout(() => {
+    document.addEventListener("click", closePageContextMenu, { once: true });
+    document.addEventListener("contextmenu", closePageContextMenu, { once: true });
+    window.addEventListener("scroll", closePageContextMenu, { capture: true, once: true });
+  }, 0);
+}
+
+function closePageContextMenu() {
+  const menu = document.getElementById("page-context-menu");
+  if (menu) menu.remove();
+}
+
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") closePageContextMenu();
+});
+
+function runPageAction(templateId, action) {
+  if (isStreaming) return;
+  switch (action) {
+    case "edit": return renamePageAction(templateId);
+    case "duplicate": return duplicatePageAction(templateId);
+    case "delete": return deletePageAction(templateId);
+    case "move-up": return movePageAction(templateId, -1);
+    case "move-down": return movePageAction(templateId, 1);
+  }
+}
+
+function renamePageAction(templateId) {
+  const tpl = currentTemplates.find((t) => t.id === templateId);
+  if (!tpl) return;
+  // Inline rename: turn the label cell into a contenteditable.
+  const row = document.querySelector(`.page-tabs__row[data-template-id="${CSS.escape(templateId)}"]`);
+  const labelEl = row && row.querySelector(".page-tabs__tab-label");
+  if (!labelEl) {
+    // Fallback: native prompt.
+    const next = prompt("Rename page", tpl.label);
+    if (!next || next.trim() === tpl.label) return;
+    sendRename(templateId, next.trim());
+    return;
+  }
+  const oldLabel = tpl.label;
+  labelEl.contentEditable = "true";
+  labelEl.classList.add("page-tabs__tab-label--editing");
+  labelEl.focus();
+  const range = document.createRange();
+  range.selectNodeContents(labelEl);
+  const sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+
+  let committed = false;
+  function commit() {
+    if (committed) return;
+    committed = true;
+    labelEl.contentEditable = "false";
+    labelEl.classList.remove("page-tabs__tab-label--editing");
+    const next = labelEl.textContent.trim();
+    if (!next || next === oldLabel) {
+      labelEl.textContent = oldLabel;
+      return;
+    }
+    sendRename(templateId, next);
+  }
+  labelEl.addEventListener("blur", commit, { once: true });
+  labelEl.addEventListener("keydown", function handler(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      labelEl.removeEventListener("keydown", handler);
+      commit();
+    } else if (e.key === "Escape") {
+      labelEl.removeEventListener("keydown", handler);
+      committed = true;
+      labelEl.textContent = oldLabel;
+      labelEl.contentEditable = "false";
+      labelEl.classList.remove("page-tabs__tab-label--editing");
+    }
+  });
+}
+
+function sendRename(templateId, newLabel) {
+  fetch("/api/templates/rename", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ templateId, newLabel }),
+  }).then((r) => r.json()).then((data) => {
+    if (data && data.ok) refreshPageTabs();
+  }).catch(() => {});
+}
+
+function duplicatePageAction(templateId) {
+  const tpl = currentTemplates.find((t) => t.id === templateId);
+  if (!tpl) return;
+  const label = prompt("Name for the duplicated page:", `${tpl.label} (Copy)`);
+  if (!label || !label.trim()) return;
+  fetch("/api/templates/clone", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ templateId, label: label.trim() }),
+  }).then((r) => r.json()).then((data) => {
+    if (data && data.ok && data.template && data.template.id) {
+      // Activate the clone so the user lands on it (mirrors createPage flow).
+      return fetch("/api/templates/activate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ templateId: data.template.id }),
+      }).then(() => { refreshPageTabs(); connectWebSocket(); });
+    }
+  }).catch(() => {});
+}
+
+function deletePageAction(templateId) {
+  const tpl = currentTemplates.find((t) => t.id === templateId);
+  if (!tpl) return;
+  const msg = `Delete "${tpl.label}"? This removes the page and its template file. Sections (modules) are kept in the library.`;
+  if (!confirm(msg)) return;
+  fetch("/api/templates", {
+    method: "DELETE",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ templateId, deleteModules: false }),
+  }).then((r) => r.json()).then((data) => {
+    if (data && data.ok) {
+      refreshPageTabs();
+      // If we deleted the active page, the server picks a new active — reconnect.
+      if (templateId === currentTemplateId) connectWebSocket();
+    }
+  }).catch(() => {});
+}
+
+function movePageAction(templateId, delta) {
+  const ids = currentTemplates.map((t) => t.id);
+  const idx = ids.indexOf(templateId);
+  if (idx < 0) return;
+  const target = idx + delta;
+  if (target < 0 || target >= ids.length) return;
+  ids.splice(idx, 1);
+  ids.splice(target, 0, templateId);
+  sendReorder(ids);
+}
+
+function sendReorder(templateIds) {
+  // Optimistic re-render so the move feels instant.
+  const map = new Map(currentTemplates.map((t) => [t.id, t]));
+  const next = templateIds.map((id) => map.get(id)).filter(Boolean);
+  if (next.length === currentTemplates.length) {
+    renderPageTabs(next, currentTemplateId);
+  }
+  fetch("/api/templates/reorder", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ templateIds }),
+  }).then((r) => r.json()).then((data) => {
+    if (!data || !data.ok) refreshPageTabs();
+  }).catch(() => refreshPageTabs());
+}
+
+// ---------------------------------------------------------------------------
+// Drag and drop reordering (HTML5)
+// ---------------------------------------------------------------------------
+
+function handlePageTabDragStart(e) {
+  const row = e.target.closest(".page-tabs__row");
+  if (!row) return;
+  pageDragSourceId = row.dataset.templateId || null;
+  row.classList.add("page-tabs__row--dragging");
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = "move";
+    // Some browsers need data set to start the drag.
+    try { e.dataTransfer.setData("text/plain", pageDragSourceId || ""); } catch (_) {}
+  }
+}
+
+function handlePageTabDragEnd(e) {
+  const row = e.target.closest(".page-tabs__row");
+  if (row) row.classList.remove("page-tabs__row--dragging");
+  pageDragSourceId = null;
+  document.querySelectorAll(".page-tabs__row--drop-before, .page-tabs__row--drop-after")
+    .forEach((el) => el.classList.remove("page-tabs__row--drop-before", "page-tabs__row--drop-after"));
+}
+
+function handlePageTabDragOver(e) {
+  if (!pageDragSourceId) return;
+  const row = e.target.closest(".page-tabs__row");
+  if (!row || row.dataset.templateId === pageDragSourceId) return;
+  e.preventDefault();
+  if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+  const rect = row.getBoundingClientRect();
+  const before = e.clientY - rect.top < rect.height / 2;
+  document.querySelectorAll(".page-tabs__row--drop-before, .page-tabs__row--drop-after")
+    .forEach((el) => el.classList.remove("page-tabs__row--drop-before", "page-tabs__row--drop-after"));
+  row.classList.add(before ? "page-tabs__row--drop-before" : "page-tabs__row--drop-after");
+}
+
+function handlePageTabDrop(e) {
+  if (!pageDragSourceId) return;
+  const row = e.target.closest(".page-tabs__row");
+  if (!row) return;
+  const targetId = row.dataset.templateId;
+  if (!targetId || targetId === pageDragSourceId) return;
+  e.preventDefault();
+  const ids = currentTemplates.map((t) => t.id);
+  const from = ids.indexOf(pageDragSourceId);
+  const to = ids.indexOf(targetId);
+  if (from < 0 || to < 0) return;
+  const rect = row.getBoundingClientRect();
+  const before = e.clientY - rect.top < rect.height / 2;
+  ids.splice(from, 1);
+  // After removing the source, the target index may have shifted by one.
+  const adjustedTo = to > from ? to - 1 : to;
+  const insertAt = before ? adjustedTo : adjustedTo + 1;
+  ids.splice(insertAt, 0, pageDragSourceId);
+  sendReorder(ids);
+}
+
+function handleAddPage() {
+  if (isStreaming) return;
+  const inlineForm = document.getElementById("page-tree-add-inline");
+  if (inlineForm) {
+    inlineForm.classList.toggle("hidden");
+    if (!inlineForm.classList.contains("hidden")) {
+      document.getElementById("page-tree-name")?.focus();
+    }
+    return;
   }
+  const label = prompt("Page name:");
+  if (!label || !label.trim()) return;
+  createPage("website_page", label.trim());
+}
+
+function handleInlineCreate() {
+  if (isStreaming) return;
+  const nameInput = document.getElementById("page-tree-name");
+  const typeSelect = document.getElementById("page-tree-type");
+  const label = nameInput?.value?.trim();
+  if (!label) { nameInput?.focus(); return; }
+  const pageType = typeSelect?.value || "website_page";
+  createPage(pageType, label);
+  nameInput.value = "";
+  document.getElementById("page-tree-add-inline")?.classList.add("hidden");
+}
+
+function createPage(pageType, label) {
+  fetch("/api/templates", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ pageType, label }),
+  }).then((res) => {
+    if (!res.ok) return null;
+    return res.json();
+  }).then((data) => {
+    const newId = data && data.template && data.template.id;
+    if (!newId) return;
+    // Server's addTemplate already marks the new template as active, but we
+    // call activate to sync the flat-field cache and let the WS reconnect
+    // re-broadcast the full session (modules + templates + active id).
+    return fetch("/api/templates/activate", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ templateId: newId }),
+    }).then((res) => {
+      if (!res || !res.ok) return;
+      // Re-render the tree immediately from the canonical list so the new
+      // page shows up even before the WS init message arrives.
+      refreshPageTabs();
+      connectWebSocket();
+    });
+  });
 }
 
+(function initPageTree() {
+  const list = document.getElementById("page-tabs-list");
+  const addBtn = document.getElementById("btn-add-page");
+  const createBtn = document.getElementById("page-tree-create");
+  const nameInput = document.getElementById("page-tree-name");
+  if (list) {
+    list.addEventListener("click", handlePageTabClick);
+    list.addEventListener("contextmenu", handlePageTabContextMenu);
+    list.addEventListener("dragstart", handlePageTabDragStart);
+    list.addEventListener("dragend", handlePageTabDragEnd);
+    list.addEventListener("dragover", handlePageTabDragOver);
+    list.addEventListener("drop", handlePageTabDrop);
+  }
+  if (addBtn) addBtn.addEventListener("click", handleAddPage);
+  if (createBtn) createBtn.addEventListener("click", handleInlineCreate);
+  if (nameInput) nameInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") handleInlineCreate();
+    if (e.key === "Escape") document.getElementById("page-tree-add-inline")?.classList.add("hidden");
+  });
+})();
+
 // ---------------------------------------------------------------------------
 // WebSocket connection
 // ---------------------------------------------------------------------------
@@ -103,11 +572,15 @@ function handleWsMessage(msg) {
       currentSessionId = msg.sessionId || "";
       currentTemplateId = msg.templateId || "";
       document.getElementById("theme-name").textContent = msg.themeName || "—";
+      setStatusTheme(msg.themeName);
+      lastSavedAt = typeof msg.updatedAt === "number" ? msg.updatedAt : 0;
+      renderLastSaved();
+      if (msg.engine) statusEngine.textContent = msg.engine;
 
       // Clear previous project's chat and module list
       messagesEl.innerHTML = "";
-      document.getElementById("module-items").innerHTML = "";
-      document.getElementById("module-count").textContent = "0";
+      const _mi = document.getElementById("module-items"); if (_mi) _mi.innerHTML = "";
+      const _mc = document.getElementById("module-count") || document.getElementById("slideout-module-count"); if (_mc) _mc.textContent = "0";
       hideChatSuggestions();
       // Reset pipeline state — DOM nodes were detached by innerHTML clear
       resetPipelineState();
@@ -118,8 +591,13 @@ function handleWsMessage(msg) {
         updateModuleList(msg.modules);
         refreshPreview();
       }
+
+      // Render page tabs for multi-page projects
+      renderPageTabs(msg.templates, currentTemplateId);
+
       statusEngine.textContent = msg.engine || "";
       fetchHsAccountStatus();
+      if (typeof refreshPortalIndicator === "function") refreshPortalIndicator();
 
       // Populate chat header
       const chatHeaderTitle = document.getElementById("chat-header-title");
@@ -172,6 +650,9 @@ function handleWsMessage(msg) {
         if (typeof window.setSelectModeDisabled === "function") {
           window.setSelectModeDisabled(true);
         }
+        if (typeof window.setEditModeDisabled === "function") {
+          window.setEditModeDisabled(true);
+        }
       }
 
       // If setup handed us an initial prompt (describe-it path), send it now
@@ -201,18 +682,25 @@ function handleWsMessage(msg) {
       // The next `modules_updated` is the terminal one for this run — let it
       // fire the change-highlight pass on the preview iframe.
       highlightOnNextModulesUpdated = true;
+      // Refresh the Library tab's module list so it stays in sync
+      if (typeof refreshDashboard === "function") refreshDashboard();
       break;
 
     case "modules_updated":
       if (msg.modules) {
         updateModuleList(msg.modules);
       }
+      if (msg.templates) {
+        if (msg.templateId) currentTemplateId = msg.templateId;
+        renderPageTabs(msg.templates, currentTemplateId);
+      }
       if (highlightOnNextModulesUpdated) {
         highlightOnNextModulesUpdated = false;
         flushChangeHighlights(msg.modules || []);
       } else {
         refreshPreview();
       }
+      markSaved(msg.updatedAt);
       break;
 
     case "version_created":
@@ -220,10 +708,11 @@ function handleWsMessage(msg) {
       // New generation: reset timeline cursor to head and refresh.
       historyTimelineCursor = 0;
       refreshHistoryTimeline();
+      markSaved(msg.updatedAt);
       break;
 
     case "parse_warning":
-      appendSystemMessage(msg.message || "Section changes could not be applied.");
+      appendSystemMessage(msg.message || "Module changes could not be applied.");
       break;
 
     case "error":
@@ -279,8 +768,8 @@ function handleWsMessage(msg) {
     case "needs_setup":
       // Clear stale UI if shown
       messagesEl.innerHTML = "";
-      document.getElementById("module-items").innerHTML = "";
-      document.getElementById("module-count").textContent = "0";
+      { const _mi = document.getElementById("module-items"); if (_mi) _mi.innerHTML = ""; }
+      { const _mc = document.getElementById("module-count") || document.getElementById("slideout-module-count"); if (_mc) _mc.textContent = "0"; }
       break;
 
     case "plan_updated":
@@ -556,9 +1045,136 @@ function handleModuleProgress(msg) {
     changedModulesInRun.add(msg.module);
   }
 
+  // Render code snippet preview when a module finishes generating, and update
+  // the global "Valid HubL" indicator based on a quick syntax check.
+  if (msg.status === "complete" && msg.moduleFiles) {
+    appendModuleCardSnippet(card, msg.module, msg.moduleFiles);
+    if (typeof window.reportHublCheck === "function") {
+      const issues = quickCheckHubl(msg.moduleFiles);
+      window.reportHublCheck(msg.module, issues);
+    }
+  } else if (msg.status === "failed" && typeof window.reportHublCheck === "function") {
+    window.reportHublCheck(msg.module, [{ kind: "generation_failed", message: "Module generation failed" }]);
+  }
+
   scrollToBottom();
 }
 
+// ---------------------------------------------------------------------------
+// Code snippet preview inside a pipeline module card
+// ---------------------------------------------------------------------------
+
+const HUBL_PREVIEW_MAX_LINES = 12;
+const HUBL_PREVIEW_MAX_CHARS = 800;
+
+function appendModuleCardSnippet(card, moduleName, files) {
+  if (card.querySelector(".pipeline-module-card__snippet")) return;
+  const snippet = buildHublSnippet(files.moduleHtml || "");
+  if (!snippet) return;
+
+  const wrap = document.createElement("div");
+  wrap.className = "pipeline-module-card__snippet";
+
+  const header = document.createElement("div");
+  header.className = "pipeline-module-card__snippet-head";
+  header.innerHTML = `
+    <span class="pipeline-module-card__snippet-label">module.html</span>
+    <button class="pipeline-module-card__snippet-toggle" type="button" aria-expanded="false">
+      <svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
+      <span class="pipeline-module-card__snippet-toggle-label">Show code</span>
+    </button>`;
+
+  const codeWrap = document.createElement("div");
+  codeWrap.className = "pipeline-module-card__snippet-code hidden";
+  const pre = document.createElement("pre");
+  const codeEl = document.createElement("code");
+  codeEl.className = "language-hubl";
+  codeEl.textContent = snippet.text;
+  pre.appendChild(codeEl);
+  codeWrap.appendChild(pre);
+
+  if (snippet.truncated) {
+    const more = document.createElement("button");
+    more.className = "pipeline-module-card__snippet-open";
+    more.type = "button";
+    more.textContent = "Open in code view →";
+    more.addEventListener("click", () => openCodeViewForModule(moduleName));
+    codeWrap.appendChild(more);
+  }
+
+  header.querySelector("button").addEventListener("click", () => {
+    const expanded = !codeWrap.classList.contains("hidden");
+    codeWrap.classList.toggle("hidden", expanded);
+    const toggle = header.querySelector(".pipeline-module-card__snippet-toggle");
+    toggle.setAttribute("aria-expanded", expanded ? "false" : "true");
+    const lbl = toggle.querySelector(".pipeline-module-card__snippet-toggle-label");
+    if (lbl) lbl.textContent = expanded ? "Show code" : "Hide code";
+  });
+
+  wrap.appendChild(header);
+  wrap.appendChild(codeWrap);
+  card.appendChild(wrap);
+}
+
+function buildHublSnippet(html) {
+  if (!html) return null;
+  const trimmed = html.replace(/^\n+/, "").replace(/\n+$/, "");
+  const lines = trimmed.split("\n");
+  let out = lines.slice(0, HUBL_PREVIEW_MAX_LINES).join("\n");
+  let truncated = lines.length > HUBL_PREVIEW_MAX_LINES;
+  if (out.length > HUBL_PREVIEW_MAX_CHARS) {
+    out = out.slice(0, HUBL_PREVIEW_MAX_CHARS);
+    truncated = true;
+  }
+  return { text: out, truncated };
+}
+
+function openCodeViewForModule(moduleName) {
+  const codeBtn = document.querySelector('.view-toggle__btn[data-view="code"]');
+  if (codeBtn) codeBtn.click();
+  // Best-effort selection of the module's html file if the file list is ready.
+  setTimeout(() => {
+    const list = document.getElementById("code-file-list");
+    if (!list) return;
+    const target = Array.from(list.querySelectorAll("[data-file-path]")).find((el) => {
+      const p = el.getAttribute("data-file-path") || "";
+      return p.includes(`/${moduleName}.module/module.html`) || p.endsWith(`${moduleName}.module/module.html`);
+    });
+    if (target) target.click();
+  }, 80);
+}
+
+// Lightweight HubL validity check — flags the same balance issues the
+// server-side validator would auto-fix, plus reserved field/ deprecated type
+// markers that the server already strips. The badge is a hint, not a gate.
+function quickCheckHubl(files) {
+  const issues = [];
+  const html = files && typeof files.moduleHtml === "string" ? files.moduleHtml : "";
+  if (!html) return issues;
+
+  const blockOpeners = ["if", "for", "block", "with", "macro", "filter", "raw", "scope_css"];
+  const stack = [];
+  const tagRe = /\{%-?\s*(end)?(\w+)/g;
+  let match;
+  while ((match = tagRe.exec(html))) {
+    const isEnd = !!match[1];
+    const name = match[2];
+    if (isEnd) {
+      if (!stack.length || stack[stack.length - 1] !== name) {
+        issues.push({ kind: "unbalanced_close", tag: name, message: `Stray {% end${name} %}` });
+      } else {
+        stack.pop();
+      }
+    } else if (blockOpeners.includes(name)) {
+      stack.push(name);
+    }
+  }
+  for (const open of stack) {
+    issues.push({ kind: "unbalanced_open", tag: open, message: `Missing {% end${open} %}` });
+  }
+  return issues;
+}
+
 function startPipelineEstimate() {
   stopPipelineEstimate();
   if (!pipelineEstimateEl) return;
@@ -634,24 +1250,26 @@ function handlePipelineComplete(msg) {
     answerEl.className = "pipeline-answer";
     answerEl.textContent = msg.answer;
     bubble.appendChild(answerEl);
+  } else if (msg.assistantMessage) {
+    streamBuffer = msg.assistantMessage;
   }
 
+  clearStreamStatus();
+  finishStreaming();
+
   const stats = document.createElement("div");
   stats.className = "pipeline-stats";
   const duration = formatDuration(msg.durationMs);
   if (msg.answer) {
     stats.textContent = `Answered in ${duration}`;
   } else {
-    stats.textContent = `Generated ${msg.modulesGenerated} section${msg.modulesGenerated === 1 ? "" : "s"} in ${duration}`;
+    stats.textContent = `Generated ${msg.modulesGenerated} module${msg.modulesGenerated === 1 ? "" : "s"} in ${duration}`;
     if (msg.modulesUnchanged > 0) {
       stats.textContent += ` (${msg.modulesUnchanged} unchanged)`;
     }
   }
   bubble.appendChild(stats);
 
-  clearStreamStatus();
-  finishStreaming();
-
   resetPipelineState();
 }
 
@@ -671,15 +1289,15 @@ function handlePipelinePartial(msg) {
 
   const bubble = streamingMsgEl || pipelineBubbleEl;
 
+  clearStreamStatus();
+  finishStreaming();
+
   const stats = document.createElement("div");
   stats.className = "pipeline-stats pipeline-stats--partial";
   const duration = formatDuration(msg.durationMs);
-  stats.textContent = `${msg.succeeded.length} sections succeeded, ${msg.failed.length} failed in ${duration}`;
+  stats.textContent = `${msg.succeeded.length} modules succeeded, ${msg.failed.length} failed in ${duration}`;
   bubble.appendChild(stats);
 
-  clearStreamStatus();
-  finishStreaming();
-
   resetPipelineState();
 }
 
@@ -710,19 +1328,19 @@ function pickContextualSuggestions(moduleNames) {
   const additive = [];
 
   if (!has("testimonial") && !has("review") && !has("quote")) {
-    additive.push("Add a testimonials section");
+    additive.push("Add a testimonials module");
   }
   if (!has("pricing") && !has("plan") && !has("tier")) {
     additive.push("Add a pricing table");
   }
   if (!has("faq") && !has("question")) {
-    additive.push("Add an FAQ section");
+    additive.push("Add an FAQ module");
   }
   if (!has("contact") && !has("form")) {
     additive.push("Add a contact form");
   }
   if (!has("hero") && !has("banner")) {
-    additive.push("Add a hero section");
+    additive.push("Add a hero module");
   }
   if (!has("feature") && !has("benefit")) {
     additive.push("Add a features grid with icons");
@@ -731,10 +1349,10 @@ function pickContextualSuggestions(moduleNames) {
     additive.push("Add a footer with social links");
   }
   if (!has("stat") && !has("metric") && !has("number")) {
-    additive.push("Add a stats section with key numbers");
+    additive.push("Add a stats module with key numbers");
   }
   if (!has("cta") && !has("call")) {
-    additive.push("Add a call-to-action section");
+    additive.push("Add a call-to-action module");
   }
 
   const refinements = [
@@ -803,12 +1421,12 @@ async function handleAgenticPrompt() {
     "vibeSpot can decompose AI generation into specialized agents:\n\n" +
     "• Intent Analyzer — classifies your request\n" +
     "• Page Architect — designs the page structure\n" +
-    "• Section Developer — generates each section in parallel\n" +
+    "• Module Developer — generates each module in parallel\n" +
     "• Validator — checks and auto-fixes errors\n\n" +
     "Tradeoffs:\n" +
     "✓ Better quality — each agent is focused on one task\n" +
     "✓ Structured output — eliminates JSON parsing failures\n" +
-    "✓ Only changed sections regenerated on edits\n" +
+    "✓ Only changed modules regenerated on edits\n" +
     "✗ Uses more calls per request (API calls or CLI subprocess calls)\n\n" +
     "You can change this anytime in Settings.",
     "Use Agentic Pipeline",
@@ -848,8 +1466,11 @@ function handleSuggestBrandExtraction() {
   scrollToBottom();
 
   el.querySelector("#btn-accept-extraction").addEventListener("click", () => {
-    el.querySelector(".brand-extraction-prompt__actions").innerHTML =
-      '<span class="brand-extraction-prompt__status">Extracting...</span>';
+    const container = el.querySelector(".chat-msg__system");
+    if (container) {
+      container.innerHTML =
+        '<span class="brand-extraction-prompt__status">Extracting…</span>';
+    }
     if (ws && ws.readyState === WebSocket.OPEN) {
       ws.send(JSON.stringify({ type: "extract_brand_assets" }));
     }
@@ -1064,6 +1685,7 @@ async function sendMessage(text) {
   );
   changedModulesInRun = new Set();
   clearModuleListChanged();
+  if (typeof window.resetHublCheck === "function") window.resetHublCheck();
 
   // Start streaming indicator
   startStreaming();
@@ -1119,6 +1741,9 @@ function startStreaming() {
   if (typeof window.setSelectModeDisabled === "function") {
     window.setSelectModeDisabled(true);
   }
+  if (typeof window.setEditModeDisabled === "function") {
+    window.setEditModeDisabled(true);
+  }
 
   hideChatSuggestions();
   if (typeof updateHistoryTimelineNavState === "function") updateHistoryTimelineNavState();
@@ -1267,6 +1892,9 @@ function finishStreaming() {
   if (typeof window.setSelectModeDisabled === "function") {
     window.setSelectModeDisabled(false);
   }
+  if (typeof window.setEditModeDisabled === "function") {
+    window.setEditModeDisabled(false);
+  }
   if (typeof updateHistoryTimelineNavState === "function") updateHistoryTimelineNavState();
 
   // Stop the timer and capture duration
@@ -1293,7 +1921,7 @@ function finishStreaming() {
   if (streamingMsgEl && streamBuffer) {
     const rendered = renderMarkdown(streamBuffer);
     const visibleText = rendered.replace(/<[^>]*>/g, "").trim();
-    streamingMsgEl.innerHTML = visibleText ? rendered : "<em>Sections applied.</em>";
+    streamingMsgEl.innerHTML = visibleText ? rendered : "<em>Modules applied.</em>";
   }
 
   streamingMsgEl = null;
@@ -1389,6 +2017,46 @@ function setStatus(text) {
   statusText.textContent = text;
 }
 
+function setStatusTheme(name) {
+  if (!statusTheme) return;
+  const value = (name || "").trim();
+  statusTheme.textContent = value && value !== "—" ? value : "";
+}
+
+function formatRelativeSaved(ts) {
+  if (!ts) return "";
+  const diff = Math.max(0, Date.now() - ts);
+  const sec = Math.round(diff / 1000);
+  if (sec < 10) return "just now";
+  if (sec < 60) return `${sec} sec ago`;
+  const min = Math.round(sec / 60);
+  if (min < 60) return `${min} min ago`;
+  const hr = Math.round(min / 60);
+  if (hr < 24) return `${hr} hr ago`;
+  const day = Math.round(hr / 24);
+  return `${day} day${day === 1 ? "" : "s"} ago`;
+}
+
+function renderLastSaved() {
+  if (!statusLastSaved) return;
+  if (!lastSavedAt) {
+    statusLastSaved.textContent = "";
+    statusLastSaved.title = "";
+    return;
+  }
+  statusLastSaved.textContent = formatRelativeSaved(lastSavedAt);
+  try {
+    statusLastSaved.title = new Date(lastSavedAt).toLocaleString();
+  } catch { /* ignore */ }
+}
+
+function markSaved(ts) {
+  lastSavedAt = typeof ts === "number" && ts > 0 ? ts : Date.now();
+  renderLastSaved();
+}
+
+setInterval(renderLastSaved, 30000);
+
 // ---------------------------------------------------------------------------
 // Restored / system messages
 // ---------------------------------------------------------------------------
@@ -1436,7 +2104,7 @@ function appendRestoredAssistantMessage(text, timestamp, pipeline) {
       : "";
 
     const duration = formatDuration(pipeline.stats.durationMs);
-    let statsText = `Generated ${pipeline.stats.modulesGenerated} section${pipeline.stats.modulesGenerated === 1 ? "" : "s"} in ${duration}`;
+    let statsText = `Generated ${pipeline.stats.modulesGenerated} module${pipeline.stats.modulesGenerated === 1 ? "" : "s"} in ${duration}`;
     if (pipeline.stats.modulesUnchanged > 0) {
       statsText += ` (${pipeline.stats.modulesUnchanged} unchanged)`;
     }
@@ -1574,7 +2242,7 @@ function attachHistoryToggle() {
 async function doRollback(hash) {
   const scoped = currentTemplateId && !historyShowAll;
   const msg = scoped
-    ? "This template's sections will be restored to the selected version. Other templates are not affected."
+    ? "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;
@@ -1740,10 +2408,16 @@ async function refreshHistoryTimeline() {
 function updateHistoryTimelineNavState() {
   const undoBtn = document.getElementById("history-timeline-undo");
   const redoBtn = document.getElementById("history-timeline-redo");
+  const topbarUndo = document.getElementById("btn-undo");
+  const topbarRedo = document.getElementById("btn-redo");
   const max = historyTimelineEntries.length - 1;
   const busy = historyTimelineRestoring || (typeof isStreaming !== "undefined" && isStreaming);
-  if (undoBtn) undoBtn.disabled = busy || historyTimelineCursor >= max;
-  if (redoBtn) redoBtn.disabled = busy || historyTimelineCursor <= 0;
+  const undoDisabled = busy || !historyGitAvailable || historyTimelineCursor >= max;
+  const redoDisabled = busy || !historyGitAvailable || historyTimelineCursor <= 0;
+  if (undoBtn) undoBtn.disabled = undoDisabled;
+  if (redoBtn) redoBtn.disabled = redoDisabled;
+  if (topbarUndo) topbarUndo.disabled = undoDisabled;
+  if (topbarRedo) topbarRedo.disabled = redoDisabled;
 }
 
 async function restoreToTimelineIndex(idx) {
@@ -1809,7 +2483,7 @@ function showTimelineTooltip(entryEl) {
   const more = (commit.changedModules || []).length - modules.length;
   const modulesLine = modules.length
     ? modules.join(", ") + (more > 0 ? ` +${more} more` : "")
-    : "No section changes";
+    : "No module changes";
 
   // Strip [templateId] prefix for display; keep "Rollback to:" prefix because
   // that case is filtered out earlier and won't reach here.
@@ -1875,6 +2549,13 @@ function hideTimelineTooltip() {
   if (undoBtn) undoBtn.addEventListener("click", timelineUndo);
   if (redoBtn) redoBtn.addEventListener("click", timelineRedo);
 
+  // Topbar undo/redo buttons mirror the timeline strip controls so the action
+  // is discoverable without opening the history panel.
+  const topbarUndo = document.getElementById("btn-undo");
+  const topbarRedo = document.getElementById("btn-redo");
+  if (topbarUndo) topbarUndo.addEventListener("click", timelineUndo);
+  if (topbarRedo) topbarRedo.addEventListener("click", timelineRedo);
+
   // Global Ctrl+Z / Ctrl+Y / Ctrl+Shift+Z keyboard shortcuts. Skip when the
   // user is editing text so we never hijack native undo in inputs/editors.
   document.addEventListener("keydown", (e) => {
@@ -1913,6 +2594,8 @@ function updateModuleList(moduleNames) {
 
   if (barCountEl) barCountEl.textContent = moduleNames.length;
   if (slideoutCountEl) slideoutCountEl.textContent = moduleNames.length;
+  const pageTreeCountEl = document.getElementById("page-tree-module-count");
+  if (pageTreeCountEl) pageTreeCountEl.textContent = moduleNames.length;
 
   // Preserve which items were marked as recently changed across re-renders so
   // the dots survive the per-module `modules_updated` events that happen
@@ -1931,7 +2614,7 @@ function updateModuleList(moduleNames) {
       <span class="module-item__drag">⠿</span>
       <span class="module-item__changed-dot" aria-hidden="true"></span>
       <span class="module-item__name">${escapeHtml(name)}</span>
-      <span class="module-item__edit" title="Edit fields">⚙</span>
+      <span class="module-item__edit" title="Edit fields">${vsIcon("settings", {size: "sm"})}</span>
       <span class="module-item__delete" title="Delete section">&times;</span>
     `;
 
@@ -2030,6 +2713,7 @@ function clearModuleListChanged() {
 
 function openModuleSlideout() {
   const slideout = document.getElementById("module-slideout");
+  slideout.classList.remove("hidden");
   document.getElementById("module-list-view").classList.remove("hidden");
   document.getElementById("module-editor-view").classList.add("hidden");
   slideout.classList.add("open");
@@ -2040,9 +2724,11 @@ function closeModuleSlideout() {
 }
 
 function showEditorView(moduleName) {
+  const slideout = document.getElementById("module-slideout");
+  slideout.classList.remove("hidden");
   document.getElementById("module-list-view").classList.add("hidden");
   document.getElementById("module-editor-view").classList.remove("hidden");
-  document.getElementById("module-slideout").classList.add("open");
+  slideout.classList.add("open");
 }
 
 function showModuleListView() {
@@ -2123,8 +2809,8 @@ async function addModuleFromLibrary(moduleName) {
   }
 }
 
-// Module bar button → toggle slideout
-document.getElementById("btn-modules")?.addEventListener("click", () => {
+// Toggle module slideout from page-tree header
+document.getElementById("btn-toggle-modules")?.addEventListener("click", () => {
   const slideout = document.getElementById("module-slideout");
   if (slideout.classList.contains("open")) {
     closeModuleSlideout();
@@ -2349,10 +3035,15 @@ inputEl.addEventListener("keydown", (e) => {
   }
 });
 
-// Auto-grow textarea
-inputEl.addEventListener("input", () => {
+// Auto-grow textarea — 3 rows default, expand up to 6 rows.
+// Line-height (1.5) × font-size (14px) × 6 rows + ~8px padding = ~134px.
+const CHAT_INPUT_MAX_HEIGHT = 134;
+function autoGrowChatInput() {
   inputEl.style.height = "auto";
-  inputEl.style.height = Math.min(inputEl.scrollHeight, 150) + "px";
+  inputEl.style.height = Math.min(inputEl.scrollHeight, CHAT_INPUT_MAX_HEIGHT) + "px";
+}
+inputEl.addEventListener("input", () => {
+  autoGrowChatInput();
 
   // Hide suggestion chips as soon as the user starts typing
   if (suggestionsVisible && inputEl.value.length > 0) {
@@ -2360,6 +3051,36 @@ inputEl.addEventListener("input", () => {
   }
 });
 
+// Contextual placeholder — adapts to plan mode and whether a page already exists.
+function updateChatPlaceholder() {
+  if (!inputEl) return;
+  const planActive = !!window.planModeActive;
+  const moduleCountEl = document.getElementById("module-count");
+  const moduleCount = moduleCountEl ? parseInt(moduleCountEl.textContent || "0", 10) || 0 : 0;
+  let placeholder;
+  if (planActive) {
+    placeholder = "Describe what you want to plan...";
+  } else if (moduleCount > 0) {
+    placeholder = "Describe what you want to change...";
+  } else {
+    placeholder = "Describe your landing page...";
+  }
+  inputEl.placeholder = placeholder;
+}
+
+// Re-evaluate placeholder when plan mode changes (plan.js dispatches this) or
+// when the module list updates.
+window.addEventListener("plan-mode-changed", updateChatPlaceholder);
+const _moduleCountEl = document.getElementById("module-count");
+if (_moduleCountEl && typeof MutationObserver !== "undefined") {
+  new MutationObserver(updateChatPlaceholder).observe(_moduleCountEl, {
+    childList: true,
+    characterData: true,
+    subtree: true,
+  });
+}
+updateChatPlaceholder();
+
 // Suggestion chip click — pre-fill input and focus, do not auto-send so the
 // user can edit before pressing Enter.
 document.getElementById("chat-suggestions")?.addEventListener("click", (e) => {
@@ -2380,35 +3101,33 @@ window.prefillChatInput = function (text) {
   const existing = inputEl.value;
   const prefix = existing.trim() ? existing.replace(/\s+$/, "") + "\n\n" : "";
   inputEl.value = prefix + text;
-  inputEl.style.height = "auto";
-  inputEl.style.height = Math.min(inputEl.scrollHeight, 150) + "px";
+  autoGrowChatInput();
   inputEl.focus();
   const end = inputEl.value.length;
   inputEl.setSelectionRange(end, end);
 };
 
-// Starter template buttons
-document.getElementById("starter-templates").addEventListener("click", (e) => {
-  const btn = e.target.closest(".starter-btn");
-  if (btn) sendMessage(btn.dataset.prompt);
-});
+// Conversation starter buttons in chat welcome
+document.getElementById("conversation-starters")?.addEventListener("click", handleConversationStarterClick);
 
-// Templates icon in input area — toggle welcome section visibility
+// Templates icon in input area — switch to Library tab where project assets live
 document.getElementById("btn-starter-templates")?.addEventListener("click", () => {
-  let welcome = document.getElementById("chat-welcome");
-  if (!welcome) {
-    restoreWelcome();
-    welcome = document.getElementById("chat-welcome");
+  const libraryTab = document.getElementById("ws-tab-library");
+  if (libraryTab) {
+    libraryTab.click();
+    document.getElementById("library-project-assets")?.scrollIntoView({ behavior: "smooth", block: "start" });
   }
-  if (welcome) welcome.classList.toggle("hidden");
 });
 
-// Version history
+// Version history (bottom panel)
 document.getElementById("btn-history")?.addEventListener("click", toggleHistoryPanel);
 document.getElementById("history-panel-close")?.addEventListener("click", () => {
   historyPanelOpen = false;
   document.getElementById("history-panel")?.classList.add("hidden");
 });
+document.getElementById("history-panel-collapse")?.addEventListener("click", () => {
+  document.getElementById("history-panel")?.classList.toggle("collapsed");
+});
 
 // Import from GitHub is now on the setup screen (setup.js)
 
@@ -2456,11 +3175,6 @@ document.getElementById("responsive-toggle").addEventListener("click", (e) => {
   chrome.style.maxWidth = isFullWidth ? "none" : width;
   chrome.style.flex = isFullWidth ? "1" : "none";
   chrome.style.width = isFullWidth ? "" : width;
-
-  // Update browser URL bar with theme name
-  const urlEl = document.getElementById("browser-url");
-  const themeName = document.getElementById("theme-name")?.textContent || "vibespot.app";
-  if (urlEl) urlEl.textContent = themeName + ".vibespot.app";
 });
 
 // ---------------------------------------------------------------------------
@@ -2477,11 +3191,10 @@ async function fetchHsAccountStatus() {
     const hs = data.environment?.tools?.hubspot;
 
     if (hs && hs.authenticated && hs.portalName) {
-      pill.innerHTML = `<span class="statusbar__dot statusbar__dot--ok"></span>${hs.portalName}${hs.portalId ? " (" + hs.portalId + ")" : ""}`;
-      pill.classList.add("statusbar__pill--visible");
+      const idSuffix = hs.portalId ? ` (${hs.portalId})` : "";
+      pill.innerHTML = `<span class="statusbar__dot statusbar__dot--ok"></span><span class="statusbar__item-text">${escapeHtml(hs.portalName)}${escapeHtml(idSuffix)}</span>`;
     } else {
       pill.textContent = "";
-      pill.classList.remove("statusbar__pill--visible");
     }
   } catch {
     // Silently ignore
@@ -2527,6 +3240,7 @@ document.getElementById("theme-name")?.addEventListener("dblclick", () => {
       .then((data) => {
         if (data.ok) {
           el.textContent = data.newName;
+          setStatusTheme(data.newName);
           if (typeof currentAppTheme !== "undefined") currentAppTheme = data.newName;
           window.location.hash = "#/app/" + encodeURIComponent(data.newName);
           // Update rail item