vibespot 1.1.1 → 1.2.0

package/ui/chat.js

@@ -18,12 +18,38 @@ 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");
 
+// 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("#starter-templates");
+  if (el) {
+    el.addEventListener("click", (e) => {
+      const btn = e.target.closest(".starter-btn");
+      if (btn) sendMessage(btn.dataset.prompt);
+    });
+  }
+}
+
 // ---------------------------------------------------------------------------
 // WebSocket connection
 // ---------------------------------------------------------------------------
@@ -82,6 +108,11 @@ function handleWsMessage(msg) {
       messagesEl.innerHTML = "";
       document.getElementById("module-items").innerHTML = "";
       document.getElementById("module-count").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);
@@ -106,6 +137,8 @@ function handleWsMessage(msg) {
           }
         }
         scrollToBottom();
+      } else {
+        restoreWelcome();
       }
 
       // Show/hide version history button
@@ -114,10 +147,44 @@ 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 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,30 +198,40 @@ 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;
       break;
 
     case "modules_updated":
       if (msg.modules) {
         updateModuleList(msg.modules);
       }
-      refreshPreview();
+      if (highlightOnNextModulesUpdated) {
+        highlightOnNextModulesUpdated = false;
+        flushChangeHighlights(msg.modules || []);
+      } else {
+        refreshPreview();
+      }
       break;
 
     case "version_created":
       if (historyPanelOpen) refreshHistoryPanel();
+      // New generation: reset timeline cursor to head and refresh.
+      historyTimelineCursor = 0;
+      refreshHistoryTimeline();
       break;
 
     case "parse_warning":
-      appendSystemMessage(msg.message || "Module changes could not be applied.");
+      appendSystemMessage(msg.message || "Section changes could not be applied.");
       break;
 
     case "error":
       stopPipelineTimer();
+      stopPipelineEstimate();
       if (typeof clearAllModulesWorking === "function") clearAllModulesWorking();
       finishStreaming();
-      pipelineBubbleEl = null;
-      pipelineStepsEl = null;
-      pipelineModulesEl = null;
+      resetPipelineState();
       appendAssistantError(msg.message);
       setStatus("Error");
       break;
@@ -246,14 +323,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 +406,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 +425,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 +506,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 +516,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,39 +536,99 @@ 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);
+  }
+
   scrollToBottom();
 }
 
+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";
@@ -430,69 +636,162 @@ function handlePipelineComplete(msg) {
     bubble.appendChild(answerEl);
   }
 
-  // Add completion stats after the last element in the bubble
   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}`;
+    stats.textContent = `Generated ${msg.modulesGenerated} section${msg.modulesGenerated === 1 ? "" : "s"} in ${duration}`;
     if (msg.modulesUnchanged > 0) {
       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);
-  }
+  bubble.appendChild(stats);
 
   clearStreamStatus();
   finishStreaming();
 
-  // 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));
 
   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);
-  }
+  stats.textContent = `${msg.succeeded.length} sections succeeded, ${msg.failed.length} failed in ${duration}`;
+  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 section");
+  }
+  if (!has("pricing") && !has("plan") && !has("tier")) {
+    additive.push("Add a pricing table");
+  }
+  if (!has("faq") && !has("question")) {
+    additive.push("Add an FAQ section");
+  }
+  if (!has("contact") && !has("form")) {
+    additive.push("Add a contact form");
+  }
+  if (!has("hero") && !has("banner")) {
+    additive.push("Add a hero section");
+  }
+  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 section with key numbers");
+  }
+  if (!has("cta") && !has("call")) {
+    additive.push("Add a call-to-action section");
+  }
+
+  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() {
@@ -504,12 +803,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" +
-    "• Module Developer — generates each module in parallel\n" +
+    "• Section Developer — generates each section 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 modules regenerated on edits\n" +
+    "✓ Only changed sections 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",
@@ -757,6 +1056,15 @@ 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();
+
   // Start streaming indicator
   startStreaming();
 
@@ -808,6 +1116,12 @@ function startStreaming() {
   lastStreamStatus = "";
   sendBtn.disabled = true;
   streamStartTime = Date.now();
+  if (typeof window.setSelectModeDisabled === "function") {
+    window.setSelectModeDisabled(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 +1264,10 @@ function finishStreaming() {
   if (!isStreaming) return;
   isStreaming = false;
   sendBtn.disabled = false;
+  if (typeof window.setSelectModeDisabled === "function") {
+    window.setSelectModeDisabled(false);
+  }
+  if (typeof updateHistoryTimelineNavState === "function") updateHistoryTimelineNavState();
 
   // Stop the timer and capture duration
   stopStreamTimer();
@@ -975,7 +1293,7 @@ function finishStreaming() {
   if (streamingMsgEl && streamBuffer) {
     const rendered = renderMarkdown(streamBuffer);
     const visibleText = rendered.replace(/<[^>]*>/g, "").trim();
-    streamingMsgEl.innerHTML = visibleText ? rendered : "<em>Modules applied.</em>";
+    streamingMsgEl.innerHTML = visibleText ? rendered : "<em>Sections applied.</em>";
   }
 
   streamingMsgEl = null;
@@ -1081,25 +1399,44 @@ 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);
-    let statsText = `Generated ${pipeline.stats.modulesGenerated} module${pipeline.stats.modulesGenerated === 1 ? "" : "s"} in ${duration}`;
+    let statsText = `Generated ${pipeline.stats.modulesGenerated} section${pipeline.stats.modulesGenerated === 1 ? "" : "s"} in ${duration}`;
     if (pipeline.stats.modulesUnchanged > 0) {
       statsText += ` (${pipeline.stats.modulesUnchanged} unchanged)`;
     }
@@ -1110,7 +1447,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 {
@@ -1234,7 +1574,7 @@ function attachHistoryToggle() {
 async function doRollback(hash) {
   const scoped = currentTemplateId && !historyShowAll;
   const msg = scoped
-    ? "This template's modules will be restored to the selected version. Other templates are not affected."
+    ? "This template's sections 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;
@@ -1278,6 +1618,290 @@ 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 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;
+}
+
+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 section 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);
+
+  // 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 +1913,26 @@ function updateModuleList(moduleNames) {
 
   if (barCountEl) barCountEl.textContent = moduleNames.length;
   if (slideoutCountEl) slideoutCountEl.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__delete" title="Delete section">&times;</span>
     `;
 
     item.querySelector(".module-item__edit").addEventListener("click", (e) => {
@@ -1325,6 +1958,72 @@ 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
 // ---------------------------------------------------------------------------
@@ -1374,7 +2073,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)}">
@@ -1460,7 +2159,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" />
@@ -1654,8 +2353,40 @@ inputEl.addEventListener("keydown", (e) => {
 inputEl.addEventListener("input", () => {
   inputEl.style.height = "auto";
   inputEl.style.height = Math.min(inputEl.scrollHeight, 150) + "px";
+
+  // Hide suggestion chips as soon as the user starts typing
+  if (suggestionsVisible && inputEl.value.length > 0) {
+    hideChatSuggestions();
+  }
 });
 
+// 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();
+});
+
+// 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;
+  inputEl.style.height = "auto";
+  inputEl.style.height = Math.min(inputEl.scrollHeight, 150) + "px";
+  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");
@@ -1664,7 +2395,11 @@ document.getElementById("starter-templates").addEventListener("click", (e) => {
 
 // Templates icon in input area — toggle welcome section visibility
 document.getElementById("btn-starter-templates")?.addEventListener("click", () => {
-  const welcome = document.getElementById("chat-welcome");
+  let welcome = document.getElementById("chat-welcome");
+  if (!welcome) {
+    restoreWelcome();
+    welcome = document.getElementById("chat-welcome");
+  }
   if (welcome) welcome.classList.toggle("hidden");
 });