vibespot 1.1.1 → 1.3.0

package/ui/chat.js

@@ -18,11 +18,506 @@ let currentTemplateId = "";
 let renderScheduled = false;
 let scrollScheduled = false;
 
+// Change tracking for the in-flight generation. `modulesBeforeRun` snapshots
+// the module list when the user submits a prompt so we can tell which modules
+// are brand new when the run finishes. `changedModulesInRun` accumulates names
+// from per-module `module_progress` events. The flag is set on
+// `generation_complete` so the *next* `modules_updated` (the post-run one)
+// triggers the highlight pass instead of a plain refresh.
+let modulesBeforeRun = null;
+let changedModulesInRun = new Set();
+let highlightOnNextModulesUpdated = false;
+let changedListClearTimer = null;
+
 const messagesEl = document.getElementById("chat-messages");
 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 || "";
+
+function restoreWelcome() {
+  if (!_welcomeHtml || messagesEl.querySelector(".chat__welcome")) return;
+  messagesEl.insertAdjacentHTML("afterbegin", _welcomeHtml);
+  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
@@ -77,18 +572,32 @@ 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();
+      stopPipelineTimer();
+      streamingMsgEl = null;
 
       if (msg.modules && msg.modules.length > 0) {
         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");
@@ -106,6 +615,8 @@ function handleWsMessage(msg) {
           }
         }
         scrollToBottom();
+      } else {
+        restoreWelcome();
       }
 
       // Show/hide version history button
@@ -114,10 +625,47 @@ function handleWsMessage(msg) {
         historyBtn.style.display = msg.gitAvailable ? "" : "none";
       }
 
+      // Initialize history timeline (compact strip above chat input)
+      historyGitAvailable = !!msg.gitAvailable;
+      if (historyGitAvailable) {
+        historyTimelineCursor = 0;
+        refreshHistoryTimeline();
+      } else {
+        const tl = document.getElementById("history-timeline");
+        if (tl) tl.classList.add("hidden");
+      }
+
       // Hydrate plan-mode state (toggle + Plan pane content)
       if (window.planController) {
         window.planController.setInitialState(msg);
       }
+
+      // If a pipeline is actively running (reconnect scenario), lock the
+      // input so the user can't double-submit. Replayed pipeline events
+      // that follow this init message will rebuild the progress UI.
+      if (msg.isGenerating) {
+        isStreaming = true;
+        sendBtn.disabled = true;
+        streamStartTime = Date.now();
+        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
+      // that the session is live. Skip if the project already has history
+      // (e.g. resumed session) to avoid double-submitting.
+      if (window.__pendingInitialPrompt) {
+        const pendingPrompt = window.__pendingInitialPrompt;
+        window.__pendingInitialPrompt = null;
+        const hasHistory = msg.messages && msg.messages.length > 0;
+        if (!hasHistory) {
+          setTimeout(() => sendMessage(pendingPrompt), 50);
+        }
+      }
       break;
 
     case "stream":
@@ -131,17 +679,36 @@ function handleWsMessage(msg) {
     case "generation_complete":
       clearStreamStatus();
       finishStreaming();
+      // 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);
       }
-      refreshPreview();
+      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":
       if (historyPanelOpen) refreshHistoryPanel();
+      // New generation: reset timeline cursor to head and refresh.
+      historyTimelineCursor = 0;
+      refreshHistoryTimeline();
+      markSaved(msg.updatedAt);
       break;
 
     case "parse_warning":
@@ -150,11 +717,10 @@ function handleWsMessage(msg) {
 
     case "error":
       stopPipelineTimer();
+      stopPipelineEstimate();
       if (typeof clearAllModulesWorking === "function") clearAllModulesWorking();
       finishStreaming();
-      pipelineBubbleEl = null;
-      pipelineStepsEl = null;
-      pipelineModulesEl = null;
+      resetPipelineState();
       appendAssistantError(msg.message);
       setStatus("Error");
       break;
@@ -202,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":
@@ -246,14 +812,73 @@ function handleWsMessage(msg) {
 const STEP_LABELS = {
   analyzing: "Analyzing",
   designing: "Designing",
-  developing: "Developing",
+  developing: "Building",
   quality_check: "Quality Check",
 };
 const STEP_ORDER = ["analyzing", "designing", "developing", "quality_check"];
 
+const STEP_ICONS = {
+  analyzing:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
+  designing:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2a10 10 0 1 0 0 20c1.4 0 2-.9 2-2 0-.5-.2-1-.5-1.4a1.5 1.5 0 0 1 1.2-2.4H17a5 5 0 0 0 5-5c0-5.5-4.5-9.2-10-9.2z"/><circle cx="7.5" cy="10.5" r="1.4"/><circle cx="12" cy="7.5" r="1.4"/><circle cx="16.5" cy="10.5" r="1.4"/></svg>',
+  developing:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>',
+  quality_check:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2 4 6v6c0 5 3.5 9.4 8 10 4.5-.6 8-5 8-10V6l-8-4z"/></svg>',
+};
+
+const CHECK_ICON =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="5 13 10 18 20 7"/></svg>';
+
+// Per-module wall-clock seconds. Rough heuristic for time-remaining display.
+const ESTIMATED_SECONDS_PER_MODULE = 14;
+
 let pipelineBubbleEl = null;
-let pipelineStepsEl = null;
+let pipelineStepperEl = null;
+let pipelineDetailEl = null;
 let pipelineModulesEl = null;
+let pipelineEstimateEl = null;
+let pipelineCurrentStep = null;
+let pipelineEstimateInterval = null;
+
+function buildStepperHtml() {
+  const parts = [];
+  for (let i = 0; i < STEP_ORDER.length; i++) {
+    const step = STEP_ORDER[i];
+    parts.push(`
+      <div class="pipeline-stage pipeline-stage--pending" data-stage="${step}">
+        <div class="pipeline-stage__indicator">
+          <span class="pipeline-stage__icon">${STEP_ICONS[step]}</span>
+          <span class="pipeline-stage__check">${CHECK_ICON}</span>
+        </div>
+        <div class="pipeline-stage__label">${STEP_LABELS[step]}</div>
+      </div>`);
+    if (i < STEP_ORDER.length - 1) {
+      parts.push('<div class="pipeline-stage__connector" data-after="' + step + '"></div>');
+    }
+  }
+  return `<div class="pipeline-stepper" role="progressbar" aria-label="Generation progress">${parts.join("")}</div>`;
+}
+
+function buildPipelineBodyHtml() {
+  return `
+    ${buildStepperHtml()}
+    <div class="pipeline-detail" hidden></div>
+    <div class="pipeline-modules"></div>
+    <div class="pipeline-footer">
+      <div class="pipeline-timer"></div>
+      <div class="pipeline-estimate" hidden></div>
+    </div>`;
+}
+
+function captureBubbleRefs(bubbleEl, container) {
+  pipelineBubbleEl = container;
+  pipelineStepperEl = bubbleEl.querySelector(".pipeline-stepper");
+  pipelineDetailEl = bubbleEl.querySelector(".pipeline-detail");
+  pipelineModulesEl = bubbleEl.querySelector(".pipeline-modules");
+  pipelineEstimateEl = bubbleEl.querySelector(".pipeline-estimate");
+}
 
 function ensurePipelineBubble() {
   if (pipelineBubbleEl) return;
@@ -270,13 +895,8 @@ function ensurePipelineBubble() {
   if (streamingMsgEl) {
     const existingDiv = streamingMsgEl.closest(".chat-msg");
     if (existingDiv) {
-      streamingMsgEl.innerHTML = `
-        <div class="pipeline-steps"></div>
-        <div class="pipeline-modules"></div>
-        <div class="pipeline-timer"></div>`;
-      pipelineBubbleEl = existingDiv;
-      pipelineStepsEl = streamingMsgEl.querySelector(".pipeline-steps");
-      pipelineModulesEl = streamingMsgEl.querySelector(".pipeline-modules");
+      streamingMsgEl.innerHTML = buildPipelineBodyHtml();
+      captureBubbleRefs(streamingMsgEl, existingDiv);
       startPipelineTimer(streamingMsgEl.querySelector(".pipeline-timer"));
       scrollToBottom();
       return;
@@ -294,64 +914,80 @@ function ensurePipelineBubble() {
         <span class="chat-msg__time">${time}</span>
       </div>
       <div class="chat-msg__bubble">
-        <div class="pipeline-steps"></div>
-        <div class="pipeline-modules"></div>
-        <div class="pipeline-timer"></div>
+        ${buildPipelineBodyHtml()}
       </div>
     </div>`;
   messagesEl.appendChild(div);
 
-  pipelineBubbleEl = div;
-  pipelineStepsEl = div.querySelector(".pipeline-steps");
-  pipelineModulesEl = div.querySelector(".pipeline-modules");
   streamingMsgEl = div.querySelector(".chat-msg__bubble");
+  captureBubbleRefs(streamingMsgEl, div);
   startPipelineTimer(div.querySelector(".pipeline-timer"));
   scrollToBottom();
 }
 
-function markStepDone(el) {
-  el.classList.add("pipeline-step--done");
-  el.classList.remove("pipeline-step--active");
-  const icon = el.querySelector(".pipeline-step__icon");
-  if (icon) icon.textContent = "✓";
+function setStageStatus(step, status) {
+  if (!pipelineStepperEl) return;
+  const stage = pipelineStepperEl.querySelector(`[data-stage="${step}"]`);
+  if (!stage) return;
+  stage.classList.remove(
+    "pipeline-stage--pending",
+    "pipeline-stage--active",
+    "pipeline-stage--done",
+    "pipeline-stage--failed",
+  );
+  stage.classList.add("pipeline-stage--" + status);
+
+  // Fill the connector behind this stage when it becomes active or done.
+  const idx = STEP_ORDER.indexOf(step);
+  if (idx > 0) {
+    const prev = STEP_ORDER[idx - 1];
+    const conn = pipelineStepperEl.querySelector(`[data-after="${prev}"]`);
+    if (conn) conn.classList.add("pipeline-stage__connector--filled");
+  }
+}
+
+function setPipelineDetail(text) {
+  if (!pipelineDetailEl) return;
+  if (!text) {
+    pipelineDetailEl.hidden = true;
+    pipelineDetailEl.textContent = "";
+    return;
+  }
+  pipelineDetailEl.hidden = false;
+  pipelineDetailEl.classList.remove("pipeline-detail--in");
+  // Force reflow so the animation restarts when text changes
+  void pipelineDetailEl.offsetWidth;
+  pipelineDetailEl.classList.add("pipeline-detail--in");
+  pipelineDetailEl.textContent = text;
 }
 
 function handleAgentStep(msg) {
   ensurePipelineBubble();
 
-  // If the same step fires again (e.g., "designing" fires twice for design system + module planner),
-  // update the existing step's label instead of creating a duplicate
-  const existingStep = pipelineStepsEl.querySelector(`[data-step="${CSS.escape(msg.step)}"]:not(.pipeline-step--done)`);
-  if (existingStep) {
-    // Mark the current one as done and create a fresh one below
-    markStepDone(existingStep);
-  } else {
-    // Mark all other active steps as done
-    const existing = pipelineStepsEl.querySelectorAll(".pipeline-step");
-    existing.forEach((el) => {
-      if (!el.classList.contains("pipeline-step--done")) {
-        markStepDone(el);
+  const incoming = msg.step;
+  const incomingIdx = STEP_ORDER.indexOf(incoming);
+
+  // Mark all prior stages done (handles forward jumps + repeated firings)
+  if (incomingIdx >= 0) {
+    for (let i = 0; i < incomingIdx; i++) {
+      const prevStage = pipelineStepperEl.querySelector(`[data-stage="${STEP_ORDER[i]}"]`);
+      if (prevStage && !prevStage.classList.contains("pipeline-stage--done")) {
+        setStageStatus(STEP_ORDER[i], "done");
       }
-    });
+    }
   }
 
-  // Add new step
-  const step = document.createElement("div");
-  step.className = "pipeline-step pipeline-step--active";
-  step.dataset.step = msg.step;
-  step.innerHTML = `<span class="pipeline-step__icon">⟳</span> <span class="pipeline-step__label">${msg.label || STEP_LABELS[msg.step] || msg.step}</span>`;
+  setStageStatus(incoming, "active");
+  pipelineCurrentStep = incoming;
 
-  // Insert quality_check AFTER module cards so the visual order is:
-  // developing → module cards → quality check
-  if (msg.step === "quality_check" && pipelineModulesEl) {
-    pipelineModulesEl.after(step);
-  } else {
-    pipelineStepsEl.appendChild(step);
-  }
+  setPipelineDetail(msg.label || STEP_LABELS[incoming] || incoming);
 
-  // Clear module cards when entering developing
-  if (msg.step === "developing") {
+  if (incoming === "developing") {
     pipelineModulesEl.innerHTML = "";
+    startPipelineEstimate();
+  } else {
+    stopPipelineEstimate();
+    if (pipelineEstimateEl) pipelineEstimateEl.hidden = true;
   }
 
   scrollToBottom();
@@ -359,17 +995,7 @@ function handleAgentStep(msg) {
 
 function handleAgentDecision(msg) {
   if (!pipelineBubbleEl) return;
-
-  // Find the step element — may be inside pipelineStepsEl or after pipelineModulesEl
-  const bubble = streamingMsgEl || pipelineBubbleEl;
-  const steps = bubble.querySelectorAll(".pipeline-step");
-  const lastStep = steps[steps.length - 1];
-  if (lastStep) {
-    const detail = document.createElement("div");
-    detail.className = "pipeline-step__decision";
-    detail.textContent = msg.decision;
-    lastStep.appendChild(detail);
-  }
+  setPipelineDetail(msg.decision);
   scrollToBottom();
 }
 
@@ -379,9 +1005,18 @@ function handleModuleProgress(msg) {
   let card = pipelineModulesEl.querySelector(`[data-module="${CSS.escape(msg.module)}"]`);
   if (!card) {
     card = document.createElement("div");
-    card.className = "pipeline-module-card";
     card.dataset.module = msg.module;
-    card.innerHTML = `<span class="pipeline-module-card__name">${escapeHtml(msg.module)}</span> <span class="pipeline-module-card__status"></span>`;
+    card.innerHTML = `
+      <div class="pipeline-module-card__head">
+        <span class="pipeline-module-card__name">${escapeHtml(msg.module)}</span>
+        <span class="pipeline-module-card__status"></span>
+      </div>
+      <div class="pipeline-module-card__progress"><div class="pipeline-module-card__progress-bar"></div></div>
+      <div class="pipeline-module-card__skeleton">
+        <div class="pipeline-module-card__skeleton-row pipeline-module-card__skeleton-row--lg"></div>
+        <div class="pipeline-module-card__skeleton-row pipeline-module-card__skeleton-row--md"></div>
+        <div class="pipeline-module-card__skeleton-row pipeline-module-card__skeleton-row--sm"></div>
+      </div>`;
     pipelineModulesEl.appendChild(card);
   }
 
@@ -390,52 +1025,242 @@ function handleModuleProgress(msg) {
 
   const statusLabels = {
     queued: "queued",
-    generating: "generating...",
-    validating: "validating...",
-    retrying: "retrying...",
-    complete: "✓",
-    failed: "✗",
+    generating: "generating",
+    validating: "validating",
+    retrying: "retrying",
+    complete: "done",
+    failed: "failed",
   };
-  statusEl.textContent = statusLabels[msg.status] || msg.status;
+  if (statusEl) statusEl.textContent = statusLabels[msg.status] || msg.status;
 
-  // Mark/clear working overlay in the preview
   if (msg.status === "generating" && typeof markModulesWorking === "function") {
     markModulesWorking([msg.module]);
   } else if ((msg.status === "complete" || msg.status === "failed") && typeof clearModuleWorking === "function") {
     clearModuleWorking(msg.module);
   }
 
+  updatePipelineEstimate();
+
+  if (msg.status === "complete" && msg.module) {
+    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;
+  pipelineEstimateEl.hidden = false;
+  updatePipelineEstimate();
+  pipelineEstimateInterval = setInterval(updatePipelineEstimate, 1000);
+}
+
+function stopPipelineEstimate() {
+  if (pipelineEstimateInterval) {
+    clearInterval(pipelineEstimateInterval);
+    pipelineEstimateInterval = null;
+  }
+}
+
+function updatePipelineEstimate() {
+  if (!pipelineEstimateEl || pipelineCurrentStep !== "developing" || !pipelineModulesEl) return;
+  const cards = pipelineModulesEl.querySelectorAll(".pipeline-module-card");
+  if (!cards.length) {
+    pipelineEstimateEl.textContent = "Estimating…";
+    return;
+  }
+  let remaining = 0;
+  let inFlight = 0;
+  cards.forEach((c) => {
+    if (c.classList.contains("pipeline-module-card--complete") || c.classList.contains("pipeline-module-card--failed")) return;
+    remaining++;
+    if (
+      c.classList.contains("pipeline-module-card--generating") ||
+      c.classList.contains("pipeline-module-card--validating") ||
+      c.classList.contains("pipeline-module-card--retrying")
+    ) {
+      inFlight++;
+    }
+  });
+  if (remaining === 0) {
+    pipelineEstimateEl.textContent = "Wrapping up…";
+    return;
+  }
+  // Default concurrency limiter is 20 modules, but most chats only have a
+  // handful — assume 4-way effective parallelism for the estimate.
+  const parallel = Math.max(1, Math.min(4, inFlight || 1));
+  const seconds = Math.max(5, Math.ceil((remaining * ESTIMATED_SECONDS_PER_MODULE) / parallel));
+  pipelineEstimateEl.textContent = `~${formatEstimate(seconds)} remaining`;
+}
+
+function formatEstimate(totalSec) {
+  if (totalSec < 60) return totalSec + "s";
+  const m = Math.floor(totalSec / 60);
+  const s = totalSec % 60;
+  if (s === 0) return m + "m";
+  return m + "m " + s + "s";
+}
+
 function handlePipelineComplete(msg) {
   if (!pipelineBubbleEl) return;
 
   stopPipelineTimer();
+  stopPipelineEstimate();
   if (typeof clearAllModulesWorking === "function") clearAllModulesWorking();
 
-  // Remove the live timer element
-  const timerEl = pipelineBubbleEl.querySelector(".pipeline-timer");
-  if (timerEl) timerEl.remove();
+  STEP_ORDER.forEach((s) => setStageStatus(s, "done"));
+  pipelineCurrentStep = null;
+  setPipelineDetail("");
+
+  const footer = pipelineBubbleEl.querySelector(".pipeline-footer");
+  if (footer) footer.remove();
 
-  // Mark all steps as done (search whole bubble since quality_check is outside pipelineStepsEl)
   const bubble = streamingMsgEl || pipelineBubbleEl;
-  bubble.querySelectorAll(".pipeline-step").forEach((el) => markStepDone(el));
 
-  // Show answer text for question intents
   if (msg.answer) {
     const answerEl = document.createElement("div");
     answerEl.className = "pipeline-answer";
     answerEl.textContent = msg.answer;
     bubble.appendChild(answerEl);
+  } else if (msg.assistantMessage) {
+    streamBuffer = msg.assistantMessage;
   }
 
-  // Add completion stats after the last element in the bubble
+  clearStreamStatus();
+  finishStreaming();
+
   const stats = document.createElement("div");
   stats.className = "pipeline-stats";
   const duration = formatDuration(msg.durationMs);
   if (msg.answer) {
-    // For questions, just show duration
     stats.textContent = `Answered in ${duration}`;
   } else {
     stats.textContent = `Generated ${msg.modulesGenerated} module${msg.modulesGenerated === 1 ? "" : "s"} in ${duration}`;
@@ -443,56 +1268,148 @@ function handlePipelineComplete(msg) {
       stats.textContent += ` (${msg.modulesUnchanged} unchanged)`;
     }
   }
-  // Place stats after quality_check step (or after modules if no quality step)
-  const qualityStep = bubble.querySelector('[data-step="quality_check"]');
-  if (qualityStep) {
-    qualityStep.after(stats);
-  } else if (pipelineModulesEl) {
-    pipelineModulesEl.after(stats);
-  } else {
-    bubble.appendChild(stats);
-  }
-
-  clearStreamStatus();
-  finishStreaming();
+  bubble.appendChild(stats);
 
-  // Reset pipeline state
-  pipelineBubbleEl = null;
-  pipelineStepsEl = null;
-  pipelineModulesEl = null;
+  resetPipelineState();
 }
 
 function handlePipelinePartial(msg) {
   if (!pipelineBubbleEl) return;
 
   stopPipelineTimer();
+  stopPipelineEstimate();
   if (typeof clearAllModulesWorking === "function") clearAllModulesWorking();
 
-  const timerEl = pipelineBubbleEl.querySelector(".pipeline-timer");
-  if (timerEl) timerEl.remove();
+  STEP_ORDER.forEach((s) => setStageStatus(s, "done"));
+  pipelineCurrentStep = null;
+  setPipelineDetail("");
+
+  const footer = pipelineBubbleEl.querySelector(".pipeline-footer");
+  if (footer) footer.remove();
 
   const bubble = streamingMsgEl || pipelineBubbleEl;
-  bubble.querySelectorAll(".pipeline-step").forEach((el) => markStepDone(el));
+
+  clearStreamStatus();
+  finishStreaming();
 
   const stats = document.createElement("div");
   stats.className = "pipeline-stats pipeline-stats--partial";
   const duration = formatDuration(msg.durationMs);
   stats.textContent = `${msg.succeeded.length} modules succeeded, ${msg.failed.length} failed in ${duration}`;
-  const qualityStep = bubble.querySelector('[data-step="quality_check"]');
-  if (qualityStep) {
-    qualityStep.after(stats);
-  } else if (pipelineModulesEl) {
-    pipelineModulesEl.after(stats);
-  } else {
-    pipelineStepsEl.appendChild(stats);
-  }
+  bubble.appendChild(stats);
 
-  clearStreamStatus();
-  finishStreaming();
+  resetPipelineState();
+}
 
+function resetPipelineState() {
   pipelineBubbleEl = null;
-  pipelineStepsEl = null;
+  pipelineStepperEl = null;
+  pipelineDetailEl = null;
   pipelineModulesEl = null;
+  pipelineEstimateEl = null;
+  pipelineCurrentStep = null;
+
+  renderChatSuggestions();
+}
+
+// ---------------------------------------------------------------------------
+// Smart chat suggestions — contextual next-step chips after generation
+// ---------------------------------------------------------------------------
+
+let suggestionsVisible = false;
+
+function getCurrentModuleNames() {
+  return Array.from(document.querySelectorAll("#module-items .module-item"))
+    .map((el) => (el.dataset.module || "").toLowerCase());
+}
+
+function pickContextualSuggestions(moduleNames) {
+  const has = (kw) => moduleNames.some((n) => n.includes(kw));
+  const additive = [];
+
+  if (!has("testimonial") && !has("review") && !has("quote")) {
+    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 module");
+  }
+  if (!has("contact") && !has("form")) {
+    additive.push("Add a contact form");
+  }
+  if (!has("hero") && !has("banner")) {
+    additive.push("Add a hero module");
+  }
+  if (!has("feature") && !has("benefit")) {
+    additive.push("Add a features grid with icons");
+  }
+  if (!has("footer")) {
+    additive.push("Add a footer with social links");
+  }
+  if (!has("stat") && !has("metric") && !has("number")) {
+    additive.push("Add a stats module with key numbers");
+  }
+  if (!has("cta") && !has("call")) {
+    additive.push("Add a call-to-action module");
+  }
+
+  const refinements = [
+    has("hero") || has("banner")
+      ? "Make the hero CTA more prominent"
+      : "Strengthen the opening hook",
+    "Change the color scheme to something bolder",
+    "Refine the typography for a more modern feel",
+    "Add subtle animations to bring it to life",
+  ];
+
+  const out = [];
+  for (const s of additive) {
+    if (out.length >= 3) break;
+    out.push(s);
+  }
+  for (const r of refinements) {
+    if (out.length >= 3) break;
+    out.push(r);
+  }
+  return out;
+}
+
+function renderChatSuggestions() {
+  const container = document.getElementById("chat-suggestions");
+  if (!container) return;
+
+  if (isStreaming || (inputEl && inputEl.value && inputEl.value.length > 0)) {
+    hideChatSuggestions();
+    return;
+  }
+
+  const suggestions = pickContextualSuggestions(getCurrentModuleNames());
+  if (!suggestions.length) {
+    hideChatSuggestions();
+    return;
+  }
+
+  container.innerHTML = "";
+  for (const text of suggestions) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "chat__suggestion-chip";
+    btn.dataset.suggestion = text;
+    btn.textContent = text;
+    container.appendChild(btn);
+  }
+  container.classList.remove("hidden");
+  suggestionsVisible = true;
+}
+
+function hideChatSuggestions() {
+  const container = document.getElementById("chat-suggestions");
+  if (!container) return;
+  container.classList.add("hidden");
+  container.innerHTML = "";
+  suggestionsVisible = false;
 }
 
 async function handleAgenticPrompt() {
@@ -549,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" }));
     }
@@ -757,6 +1677,16 @@ async function sendMessage(text) {
   // Show user message with file chips
   appendUserMessage(text, null, uploadedFiles);
 
+  // Snapshot the current module list so we can detect new vs. modified modules
+  // when the generation finishes. Clears stale change-indicator dots from any
+  // previous run so the user only sees indicators for the run they just kicked.
+  modulesBeforeRun = new Set(
+    Array.from(document.querySelectorAll(".module-item")).map((el) => el.dataset.module),
+  );
+  changedModulesInRun = new Set();
+  clearModuleListChanged();
+  if (typeof window.resetHublCheck === "function") window.resetHublCheck();
+
   // Start streaming indicator
   startStreaming();
 
@@ -808,6 +1738,15 @@ function startStreaming() {
   lastStreamStatus = "";
   sendBtn.disabled = true;
   streamStartTime = Date.now();
+  if (typeof window.setSelectModeDisabled === "function") {
+    window.setSelectModeDisabled(true);
+  }
+  if (typeof window.setEditModeDisabled === "function") {
+    window.setEditModeDisabled(true);
+  }
+
+  hideChatSuggestions();
+  if (typeof updateHistoryTimelineNavState === "function") updateHistoryTimelineNavState();
 
   // Don't show generating preview here — agentic mode keeps the page visible.
   // For single-call mode, showGeneratingPreview() is called on first "stream" event.
@@ -950,6 +1889,13 @@ function finishStreaming() {
   if (!isStreaming) return;
   isStreaming = false;
   sendBtn.disabled = false;
+  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
   stopStreamTimer();
@@ -1071,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
 // ---------------------------------------------------------------------------
@@ -1081,21 +2067,40 @@ function appendRestoredAssistantMessage(text, timestamp, pipeline) {
   div.className = "chat-msg chat-msg--assistant";
 
   if (pipeline && pipeline.steps && pipeline.steps.length > 0) {
-    // Render detailed pipeline structure
-    const stepsHtml = pipeline.steps.map((s) => {
-      const icon = "&#x2714;";
-      const decisionsHtml = (s.decisions || [])
-        .map((d) => `<div class="pipeline-step__decision">${escapeHtml(d)}</div>`)
-        .join("");
-      return `<div class="pipeline-step pipeline-step--done"><span class="pipeline-step__icon">${icon}</span> <span class="pipeline-step__label">${escapeHtml(s.label)}</span>${decisionsHtml}</div>`;
-    }).join("");
+    // Finalized stepper — every visited stage shown as done
+    const stagesSeen = new Set(pipeline.steps.map((s) => s.step));
+    const stepperParts = [];
+    for (let i = 0; i < STEP_ORDER.length; i++) {
+      const step = STEP_ORDER[i];
+      const visited = stagesSeen.has(step);
+      const stateClass = visited ? "pipeline-stage--done" : "pipeline-stage--pending";
+      stepperParts.push(`
+        <div class="pipeline-stage ${stateClass}" data-stage="${step}">
+          <div class="pipeline-stage__indicator">
+            <span class="pipeline-stage__icon">${STEP_ICONS[step]}</span>
+            <span class="pipeline-stage__check">${CHECK_ICON}</span>
+          </div>
+          <div class="pipeline-stage__label">${STEP_LABELS[step]}</div>
+        </div>`);
+      if (i < STEP_ORDER.length - 1) {
+        const filled = visited && stagesSeen.has(STEP_ORDER[i + 1]) ? "pipeline-stage__connector--filled" : "";
+        stepperParts.push(`<div class="pipeline-stage__connector ${filled}" data-after="${step}"></div>`);
+      }
+    }
+
+    const allDecisions = pipeline.steps.flatMap((s) => s.decisions || []);
+    const decisionHtml = allDecisions.length
+      ? `<details class="pipeline-detail-summary"><summary>${allDecisions.length} decision${allDecisions.length === 1 ? "" : "s"} logged</summary>${allDecisions.map((d) => `<div class="pipeline-detail-summary__row">${escapeHtml(d)}</div>`).join("")}</details>`
+      : "";
 
     const modulesHtml = pipeline.modules && pipeline.modules.length > 0
-      ? pipeline.modules.map((m) => {
-          const statusClass = m.status === "failed" ? "pipeline-module-card--failed" : "pipeline-module-card--done";
-          const statusIcon = m.status === "failed" ? "&#x2718;" : "&#x2714;";
-          return `<div class="pipeline-module-card ${statusClass}">${statusIcon} ${escapeHtml(m.name)}</div>`;
-        }).join("")
+      ? `<div class="pipeline-modules pipeline-modules--restored">${pipeline.modules
+          .map((m) => {
+            const statusClass = m.status === "failed" ? "pipeline-module-card--failed" : "pipeline-module-card--complete";
+            const statusLabel = m.status === "failed" ? "failed" : "done";
+            return `<div class="pipeline-module-card ${statusClass}"><div class="pipeline-module-card__head"><span class="pipeline-module-card__name">${escapeHtml(m.name)}</span><span class="pipeline-module-card__status">${statusLabel}</span></div></div>`;
+          })
+          .join("")}</div>`
       : "";
 
     const duration = formatDuration(pipeline.stats.durationMs);
@@ -1110,7 +2115,10 @@ function appendRestoredAssistantMessage(text, timestamp, pipeline) {
       <div class="chat-msg__content">
         ${time ? `<div class="chat-msg__header"><span class="chat-msg__sender">vibeSpot AI</span><span class="chat-msg__time">${time}</span></div>` : ""}
         <div class="chat-msg__bubble">
-          <div class="pipeline-steps">${stepsHtml}${modulesHtml ? `<div class="pipeline-modules-restored">${modulesHtml}</div>` : ""}<div class="${statsClass}">${statsText}</div></div>
+          <div class="pipeline-stepper">${stepperParts.join("")}</div>
+          ${decisionHtml}
+          ${modulesHtml}
+          <div class="${statsClass}">${statsText}</div>
         </div>
       </div>`;
   } else {
@@ -1278,6 +2286,303 @@ function timeAgoShort(timestamp) {
   return days + "d";
 }
 
+// ---------------------------------------------------------------------------
+// History timeline — compact strip above chat input with undo/redo support
+// ---------------------------------------------------------------------------
+
+let historyGitAvailable = false;
+// Index into historyTimelineEntries (filtered list, newest first) representing
+// the version the user is currently viewing. 0 = head, N = N steps back.
+let historyTimelineCursor = 0;
+let historyTimelineEntries = [];
+let historyTimelineRestoring = false;
+
+function shortenCommitMessage(msg) {
+  if (!msg) return "Update";
+  let s = msg;
+  // Strip [templateId] prefix
+  const prefix = s.match(/^\[[^\]]+\]\s*/);
+  if (prefix) s = s.slice(prefix[0].length);
+  // Strip leading "Rollback to: "
+  s = s.replace(/^Rollback to:\s*/i, "");
+  if (s.length > 32) s = s.slice(0, 31) + "…";
+  return s;
+}
+
+function stripCommitPrefix(msg) {
+  return (msg || "").replace(/^\[[^\]]+\]\s*/, "");
+}
+
+// Compute which timeline entry represents the *currently visible* version.
+// HEAD may be a "Rollback to: <original>" commit (an internal marker we filter
+// out of the visible timeline); in that case, we map back to the original
+// entry by message. Otherwise the cursor sits at HEAD itself.
+function computeCursorFromHead(commits, entries) {
+  if (!commits.length || !entries.length) return 0;
+  const headMsg = stripCommitPrefix(commits[0].message);
+  if (/^rollback to:\s*/i.test(headMsg)) {
+    const orig = headMsg.replace(/^rollback to:\s*/i, "").trim().replace(/\.{3}$/, "");
+    for (let i = 0; i < entries.length; i++) {
+      const em = stripCommitPrefix(entries[i].message);
+      if (em === orig || em.startsWith(orig)) return i;
+    }
+    return 0;
+  }
+  for (let i = 0; i < entries.length; i++) {
+    if (entries[i].fullHash === commits[0].fullHash) return i;
+  }
+  return 0;
+}
+
+async function refreshHistoryTimeline() {
+  const tl = document.getElementById("history-timeline");
+  const track = document.getElementById("history-timeline-track");
+  if (!tl || !track) return;
+
+  if (!historyGitAvailable) {
+    tl.classList.add("hidden");
+    return;
+  }
+
+  try {
+    const useFilter = currentTemplateId;
+    const url = useFilter
+      ? `/api/history?templateId=${encodeURIComponent(currentTemplateId)}`
+      : "/api/history";
+    const res = await fetch(url);
+    const data = await res.json();
+    if (!data.available) {
+      tl.classList.add("hidden");
+      return;
+    }
+
+    const allCommits = data.commits || [];
+    // Filter out automatic "Rollback to:" commits — they're internal markers.
+    // The user navigates the conceptual history of generation events.
+    const entries = allCommits.filter((c) => {
+      return !/^rollback to:\s*/i.test(stripCommitPrefix(c.message));
+    });
+    historyTimelineEntries = entries;
+
+    if (entries.length === 0) {
+      tl.classList.add("hidden");
+      return;
+    }
+
+    historyTimelineCursor = computeCursorFromHead(allCommits, entries);
+
+    tl.classList.remove("hidden");
+    track.innerHTML = "";
+    const frag = document.createDocumentFragment();
+    entries.forEach((commit, idx) => {
+      const isInitial = (commit.message || "").startsWith("Initial ");
+      const item = document.createElement("button");
+      item.type = "button";
+      item.className = "history-timeline__entry"
+        + (idx === historyTimelineCursor ? " history-timeline__entry--current" : "")
+        + (isInitial ? " history-timeline__entry--initial" : "");
+      item.dataset.hash = commit.fullHash;
+      item.dataset.index = String(idx);
+      item.innerHTML = `<span class="history-timeline__entry-dot"></span>`
+        + `<span class="history-timeline__entry-label"></span>`;
+      item.querySelector(".history-timeline__entry-label").textContent = shortenCommitMessage(commit.message);
+      item.title = ""; // we use a custom tooltip
+      frag.appendChild(item);
+    });
+    track.appendChild(frag);
+
+    updateHistoryTimelineNavState();
+
+    // Scroll the current entry into view
+    requestAnimationFrame(() => {
+      const cur = track.querySelector(".history-timeline__entry--current");
+      if (cur && typeof cur.scrollIntoView === "function") {
+        cur.scrollIntoView({ block: "nearest", inline: "nearest" });
+      }
+    });
+  } catch {
+    tl.classList.add("hidden");
+  }
+}
+
+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);
+  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) {
+  if (historyTimelineRestoring) return;
+  if (idx < 0 || idx >= historyTimelineEntries.length) return;
+  if (typeof isStreaming !== "undefined" && isStreaming) return;
+  const target = historyTimelineEntries[idx];
+  if (!target) return;
+
+  historyTimelineRestoring = true;
+  updateHistoryTimelineNavState();
+  setStatus("Restoring…");
+
+  try {
+    const payload = { hash: target.fullHash };
+    if (currentTemplateId) payload.templateId = currentTemplateId;
+    const res = await fetch("/api/rollback", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+    const data = await res.json();
+    if (data.error) {
+      await vibeAlert(data.error, "Restore failed");
+      setStatus("Ready");
+      return;
+    }
+    if (data.modules) updateModuleList(data.modules);
+    refreshPreview();
+    // Refresh from server — the new HEAD is a "Rollback to:" commit pointing
+    // at the entry we just restored; computeCursorFromHead resolves it back.
+    await refreshHistoryTimeline();
+    if (historyPanelOpen) refreshHistoryPanel();
+    setStatus("Ready");
+  } catch (err) {
+    await vibeAlert(err.message || "Restore failed", "Restore failed");
+    setStatus("Ready");
+  } finally {
+    historyTimelineRestoring = false;
+    updateHistoryTimelineNavState();
+  }
+}
+
+function timelineUndo() {
+  restoreToTimelineIndex(historyTimelineCursor + 1);
+}
+
+function timelineRedo() {
+  restoreToTimelineIndex(historyTimelineCursor - 1);
+}
+
+// ---- Tooltip on hover ------------------------------------------------------
+
+function showTimelineTooltip(entryEl) {
+  const tooltip = document.getElementById("history-timeline-tooltip");
+  const tl = document.getElementById("history-timeline");
+  if (!tooltip || !tl || !entryEl) return;
+  const idx = parseInt(entryEl.dataset.index || "-1", 10);
+  const commit = historyTimelineEntries[idx];
+  if (!commit) return;
+
+  const modules = (commit.changedModules || []).slice(0, 5);
+  const more = (commit.changedModules || []).length - modules.length;
+  const modulesLine = modules.length
+    ? modules.join(", ") + (more > 0 ? ` +${more} more` : "")
+    : "No module changes";
+
+  // Strip [templateId] prefix for display; keep "Rollback to:" prefix because
+  // that case is filtered out earlier and won't reach here.
+  let displayMsg = commit.message || "";
+  const prefix = displayMsg.match(/^\[[^\]]+\]\s*/);
+  if (prefix) displayMsg = displayMsg.slice(prefix[0].length);
+
+  tooltip.innerHTML = `
+    <div class="history-timeline__tooltip-title"></div>
+    <div class="history-timeline__tooltip-meta"></div>
+    <div class="history-timeline__tooltip-modules"></div>
+  `;
+  tooltip.querySelector(".history-timeline__tooltip-title").textContent = displayMsg || "Update";
+  tooltip.querySelector(".history-timeline__tooltip-meta").textContent =
+    `${commit.hash} · ${timeAgoShort(commit.timestamp)} ago`;
+  tooltip.querySelector(".history-timeline__tooltip-modules").textContent = modulesLine;
+
+  // Position above the entry, clamped within the timeline strip.
+  tooltip.classList.remove("hidden");
+  const tlRect = tl.getBoundingClientRect();
+  const entryRect = entryEl.getBoundingClientRect();
+  const left = Math.max(8, entryRect.left - tlRect.left);
+  const tooltipW = tooltip.offsetWidth;
+  const maxLeft = Math.max(8, tl.clientWidth - tooltipW - 8);
+  tooltip.style.left = Math.min(left, maxLeft) + "px";
+}
+
+function hideTimelineTooltip() {
+  const tooltip = document.getElementById("history-timeline-tooltip");
+  if (tooltip) tooltip.classList.add("hidden");
+}
+
+// ---- Wire up DOM events ----------------------------------------------------
+
+(function wireHistoryTimeline() {
+  const track = document.getElementById("history-timeline-track");
+  const undoBtn = document.getElementById("history-timeline-undo");
+  const redoBtn = document.getElementById("history-timeline-redo");
+
+  if (track) {
+    track.addEventListener("click", (e) => {
+      const entry = e.target.closest(".history-timeline__entry");
+      if (!entry) return;
+      const idx = parseInt(entry.dataset.index || "-1", 10);
+      if (idx >= 0) restoreToTimelineIndex(idx);
+    });
+
+    let hoverTimer = null;
+    track.addEventListener("mouseover", (e) => {
+      const entry = e.target.closest(".history-timeline__entry");
+      if (!entry) return;
+      clearTimeout(hoverTimer);
+      hoverTimer = setTimeout(() => showTimelineTooltip(entry), 200);
+    });
+    track.addEventListener("mouseout", (e) => {
+      const entry = e.target.closest(".history-timeline__entry");
+      if (!entry) return;
+      clearTimeout(hoverTimer);
+      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) => {
+    const meta = e.metaKey || e.ctrlKey;
+    if (!meta) return;
+    const key = e.key.toLowerCase();
+    if (key !== "z" && key !== "y") return;
+
+    const active = document.activeElement;
+    if (active) {
+      const tag = (active.tagName || "").toLowerCase();
+      if (tag === "input" || tag === "textarea" || tag === "select") return;
+      if (active.isContentEditable) return;
+    }
+
+    if (!historyGitAvailable) return;
+
+    if (key === "z" && !e.shiftKey) {
+      e.preventDefault();
+      timelineUndo();
+    } else if ((key === "z" && e.shiftKey) || key === "y") {
+      e.preventDefault();
+      timelineRedo();
+    }
+  });
+})();
+
 // ---------------------------------------------------------------------------
 // Module list
 // ---------------------------------------------------------------------------
@@ -1289,17 +2594,28 @@ 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
+  // mid-run.
+  const previouslyChanged = new Set(
+    Array.from(itemsEl.querySelectorAll(".module-item--changed")).map((el) => el.dataset.module),
+  );
   itemsEl.innerHTML = "";
 
   for (const name of moduleNames) {
     const item = document.createElement("div");
     item.className = "module-item";
+    if (previouslyChanged.has(name)) item.classList.add("module-item--changed");
     item.dataset.module = name;
     item.innerHTML = `
       <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__delete" title="Delete module">&times;</span>
+      <span class="module-item__edit" title="Edit fields">${vsIcon("settings", {size: "sm"})}</span>
+      <span class="module-item__delete" title="Delete section">&times;</span>
     `;
 
     item.querySelector(".module-item__edit").addEventListener("click", (e) => {
@@ -1325,12 +2641,79 @@ function highlightModuleItem(name) {
   });
 }
 
+/**
+ * Flush change highlights at the end of a generation run: refresh the preview
+ * with the changed/new module sets, mark the sidebar items, and schedule the
+ * 30-second auto-clear of the dots.
+ */
+function flushChangeHighlights(latestModules) {
+  const changed = Array.from(changedModulesInRun);
+  const before = modulesBeforeRun;
+  changedModulesInRun = new Set();
+  modulesBeforeRun = null;
+
+  let newModules = [];
+  if (before) {
+    if (changed.length > 0) {
+      // Agentic pipeline: we know exactly which modules ran. New = ran AND
+      // not in the pre-run snapshot.
+      newModules = changed.filter((m) => !before.has(m));
+    } else if (Array.isArray(latestModules)) {
+      // Single-call mode emits no per-module events. Fall back to "names that
+      // appeared since the run started" — we can't know which existing
+      // modules were rewritten without server-side support.
+      newModules = latestModules.filter((m) => !before.has(m));
+    }
+  }
+
+  refreshPreview({
+    changedModules: changed.length > 0 ? changed : newModules,
+    newModules,
+  });
+
+  // Sidebar dots only fire when we have explicit per-module change info; the
+  // single-call fallback above only knows about new modules, which already
+  // get the slide-in animation in the preview.
+  if (changed.length > 0) {
+    markModuleListChanged(changed);
+  } else if (newModules.length > 0) {
+    markModuleListChanged(newModules);
+  }
+}
+
+/** Apply the change indicator dot to each named module in the sidebar. */
+function markModuleListChanged(names) {
+  if (!names || names.length === 0) return;
+  const itemsEl = document.getElementById("module-items");
+  if (!itemsEl) return;
+  const set = new Set(names);
+  itemsEl.querySelectorAll(".module-item").forEach((el) => {
+    if (set.has(el.dataset.module)) el.classList.add("module-item--changed");
+  });
+
+  // Auto-clear after 30s per spec; next generation also clears via sendMessage.
+  if (changedListClearTimer) clearTimeout(changedListClearTimer);
+  changedListClearTimer = setTimeout(clearModuleListChanged, 30000);
+}
+
+/** Remove all change indicator dots from the sidebar. */
+function clearModuleListChanged() {
+  if (changedListClearTimer) {
+    clearTimeout(changedListClearTimer);
+    changedListClearTimer = null;
+  }
+  document.querySelectorAll(".module-item--changed").forEach((el) => {
+    el.classList.remove("module-item--changed");
+  });
+}
+
 // ---------------------------------------------------------------------------
 // Module slideout
 // ---------------------------------------------------------------------------
 
 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");
@@ -1341,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() {
@@ -1374,7 +2759,7 @@ async function toggleModuleLibraryDropdown() {
     );
 
     if (available.length === 0) {
-      dropdown.innerHTML = `<div class="module-library-dropdown__empty">No other modules available</div>`;
+      dropdown.innerHTML = `<div class="module-library-dropdown__empty">No other sections available</div>`;
     } else {
       dropdown.innerHTML = available.map((m) =>
         `<button class="module-library-dropdown__item" data-name="${escapeHtml(m.moduleName)}">
@@ -1424,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();
@@ -1460,7 +2845,7 @@ function confirmDeleteModule(moduleName) {
     overlay.innerHTML = `
       <div class="confirm-dialog">
         <div class="confirm-dialog__title">Remove "${escapeHtml(moduleName)}"?</div>
-        <p class="confirm-dialog__detail">Module will be removed from this page but kept in your library.</p>
+        <p class="confirm-dialog__detail">Section will be removed from this page but kept in your library.</p>
         <label class="confirm-dialog__toggle">
           <span class="confirm-dialog__toggle-switch">
             <input type="checkbox" data-role="toggle" />
@@ -1650,30 +3035,99 @@ 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) {
+    hideChatSuggestions();
+  }
 });
 
-// Starter template buttons
-document.getElementById("starter-templates").addEventListener("click", (e) => {
-  const btn = e.target.closest(".starter-btn");
-  if (btn) sendMessage(btn.dataset.prompt);
+// 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) => {
+  const chip = e.target.closest(".chat__suggestion-chip");
+  if (!chip) return;
+  const text = chip.dataset.suggestion || chip.textContent || "";
+  inputEl.value = text;
+  inputEl.focus();
+  inputEl.setSelectionRange(text.length, text.length);
+  // Trigger the input event so the textarea resizes; this also collapses chips
+  inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+  hideChatSuggestions();
 });
 
-// Templates icon in input area — toggle welcome section visibility
+// Pre-fill chat input from preview select-mode click
+window.prefillChatInput = function (text) {
+  if (!text) return;
+  const existing = inputEl.value;
+  const prefix = existing.trim() ? existing.replace(/\s+$/, "") + "\n\n" : "";
+  inputEl.value = prefix + text;
+  autoGrowChatInput();
+  inputEl.focus();
+  const end = inputEl.value.length;
+  inputEl.setSelectionRange(end, end);
+};
+
+// Conversation starter buttons in chat welcome
+document.getElementById("conversation-starters")?.addEventListener("click", handleConversationStarterClick);
+
+// Templates icon in input area — switch to Library tab where project assets live
 document.getElementById("btn-starter-templates")?.addEventListener("click", () => {
-  const welcome = document.getElementById("chat-welcome");
-  if (welcome) welcome.classList.toggle("hidden");
+  const libraryTab = document.getElementById("ws-tab-library");
+  if (libraryTab) {
+    libraryTab.click();
+    document.getElementById("library-project-assets")?.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
 });
 
-// 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)
 
@@ -1721,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";
 });
 
 // ---------------------------------------------------------------------------
@@ -1742,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
@@ -1792,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