vibespot 1.6.4 → 1.7.7

package/ui/chat.js

@@ -8,6 +8,15 @@
 
 let ws = null;
 let isStreaming = false;
+// True while an agentic pipeline is actively building (Stage 3) — the window in
+// which a new message barges in to cancel-and-replan (VIB-1880). False when
+// parked at a checkpoint gate or running single-call mode.
+let agenticRunning = false;
+// Softened barge-in (VIB-1876): a message sent during an active build is QUEUED
+// by default and dispatched when the build finishes. The queued chip carries an
+// "Interrupt now" button that triggers the old cancel-and-replan barge-in.
+let queuedMessage = null; // { text, opts }
+let queuedChipEl = null;
 let streamingMsgEl = null;
 let streamBuffer = "";
 let streamStartTime = 0;
@@ -36,6 +45,9 @@ let lastGenerationBubbleEl = null;
 const messagesEl = document.getElementById("chat-messages");
 const inputEl = document.getElementById("chat-input");
 const sendBtn = document.getElementById("chat-send");
+const oneShotBtn = document.getElementById("chat-send-oneshot");
+// Remembered so the barge-in hint placeholder can be restored after a run.
+const chatInputDefaultPlaceholder = (inputEl && inputEl.placeholder) || "";
 const statusText = document.getElementById("status-text");
 const statusEngine = document.getElementById("status-engine");
 const statusTheme = document.getElementById("status-theme");
@@ -662,6 +674,13 @@ function handleWsMessage(msg) {
         }
       }
 
+      // Rehydrate a parked checkpoint after a refresh / device sleep (VIB-1876):
+      // the server kept the gate, so re-render the card and let the user resume
+      // from where they were. Plan-mode parks are rehydrated by planController.
+      if (msg.pendingCheckpoint && msg.pendingCheckpoint.preview && msg.pendingCheckpoint.kind !== "plan") {
+        handleCheckpointRequested({ preview: msg.pendingCheckpoint.preview });
+      }
+
       // 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.
@@ -691,6 +710,7 @@ function handleWsMessage(msg) {
       highlightOnNextModulesUpdated = true;
       // Refresh the Library tab's module list so it stays in sync
       if (typeof refreshDashboard === "function") refreshDashboard();
+      flushQueuedMessage();
       break;
 
     case "modules_updated":
@@ -743,14 +763,26 @@ function handleWsMessage(msg) {
       handleAgentDecision(msg);
       break;
     case "module_progress":
+      enableBargeIn();
       handleModuleProgress(msg);
       break;
+    case "generation_superseded":
+      // The server confirmed our barge-in cancelled the prior run; the fresh
+      // run's events follow. Nothing to do — supersedeCurrentRun already reset.
+      setStatus("Redirecting…");
+      break;
     case "pipeline_complete":
       handlePipelineComplete(msg);
       break;
     case "pipeline_partial":
       handlePipelinePartial(msg);
       break;
+    case "checkpoint_requested":
+      handleCheckpointRequested(msg);
+      break;
+    case "checkpoint_cancelled":
+      handleCheckpointCancelled();
+      break;
     case "generation_cost":
       handleGenerationCost(msg);
       break;
@@ -972,6 +1004,8 @@ function setPipelineDetail(text) {
 }
 
 function handleAgentStep(msg) {
+  // The expensive build stage is the barge-in window (VIB-1880).
+  if (msg.step === "developing") enableBargeIn();
   ensurePipelineBubble();
 
   const incoming = msg.step;
@@ -1285,6 +1319,7 @@ function handlePipelineComplete(msg) {
   lastGenerationBubbleEl = bubble;
 
   resetPipelineState();
+  flushQueuedMessage();
 }
 
 function handlePipelinePartial(msg) {
@@ -1315,6 +1350,7 @@ function handlePipelinePartial(msg) {
   lastGenerationBubbleEl = bubble;
 
   resetPipelineState();
+  flushQueuedMessage();
 }
 
 function resetPipelineState() {
@@ -1745,9 +1781,21 @@ fileInputEl.addEventListener("change", () => {
 // Sending messages
 // ---------------------------------------------------------------------------
 
-async function sendMessage(text) {
+async function sendMessage(text, opts = {}) {
   const hasFiles = pendingFiles.length > 0;
-  if ((!text.trim() && !hasFiles) || isStreaming || !ws || ws.readyState !== WebSocket.OPEN) return;
+  if (!ws || ws.readyState !== WebSocket.OPEN) return;
+  if (!text.trim() && !hasFiles) return;
+  // Block sends while busy — EXCEPT during an active agentic build. There, a new
+  // message is QUEUED by default and runs when the build finishes (VIB-1876);
+  // an explicit Interrupt (opts.interrupt) triggers the cancel-and-replan
+  // barge-in (VIB-1880). Single-call streaming and checkpoint gates stay locked.
+  if (isStreaming && !agenticRunning) return;
+  const buildActive = isStreaming && agenticRunning;
+  if (buildActive && !opts.interrupt) {
+    queueMessage(text, opts);
+    return;
+  }
+  if (buildActive && opts.interrupt) supersedeCurrentRun();
 
   // Remove welcome screen
   const welcome = messagesEl.querySelector(".chat__welcome");
@@ -1794,6 +1842,8 @@ async function sendMessage(text) {
   if (uploadedFiles.length > 0) {
     payload.fileIds = uploadedFiles.map((f) => f.id);
   }
+  // One-shot: skip the design checkpoint and build the whole page (VIB-1877).
+  if (opts.oneShot) payload.oneShot = true;
   ws.send(JSON.stringify(payload));
 
   // Clear input
@@ -1836,6 +1886,7 @@ function startStreaming() {
   streamBuffer = "";
   lastStreamStatus = "";
   sendBtn.disabled = true;
+  if (oneShotBtn) oneShotBtn.disabled = true;
   streamStartTime = Date.now();
   if (typeof window.setSelectModeDisabled === "function") {
     window.setSelectModeDisabled(true);
@@ -1984,10 +2035,107 @@ function clearStreamStatus() {
   if (statusEl) statusEl.remove();
 }
 
+// Open the barge-in window: the build is running, so re-enable the composer and
+// let the user redirect the run mid-flight (VIB-1880).
+function enableBargeIn() {
+  if (agenticRunning) return;
+  agenticRunning = true;
+  sendBtn.disabled = false;
+  if (oneShotBtn) oneShotBtn.disabled = false;
+  if (inputEl) inputEl.placeholder = "Building… your message will queue (or Interrupt to redirect now)";
+}
+
+// --- Softened barge-in: queue-by-default with an Interrupt button (VIB-1876) ---
+
+// Queue a message sent mid-build instead of cancelling the run. Latest wins.
+function queueMessage(text, opts) {
+  if (!text.trim() && pendingFiles.length === 0) return;
+  queuedMessage = { text, opts: { ...opts } };
+  if (inputEl) {
+    inputEl.value = "";
+    inputEl.dispatchEvent(new Event("input"));
+  }
+  renderQueuedChip();
+  setStatus("Message queued");
+}
+
+function clearQueuedMessage() {
+  queuedMessage = null;
+  if (queuedChipEl) {
+    queuedChipEl.remove();
+    queuedChipEl = null;
+  }
+}
+
+// Trigger the real barge-in (cancel-and-replan) with the queued message.
+function interruptWithQueued() {
+  if (!queuedMessage) return;
+  const { text, opts } = queuedMessage;
+  clearQueuedMessage();
+  sendMessage(text, { ...opts, interrupt: true });
+}
+
+// Dispatch the queued message once the current build has finished.
+function flushQueuedMessage() {
+  if (!queuedMessage) return;
+  const { text, opts } = queuedMessage;
+  clearQueuedMessage();
+  // Defer so the just-finished run's UI settles before the next one starts.
+  setTimeout(() => sendMessage(text, opts), 0);
+}
+
+function renderQueuedChip() {
+  if (!queuedMessage) return clearQueuedMessage();
+  const area = inputEl && inputEl.closest(".chat__input-area");
+  if (!area) return;
+  if (!queuedChipEl) {
+    queuedChipEl = document.createElement("div");
+    queuedChipEl.className = "queued-msg";
+    queuedChipEl.style.cssText =
+      "display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 10px;border:1px solid var(--border,#e2e2e2);border-radius:8px;background:var(--surface-2,#faf7f5);font-size:13px;";
+    area.insertBefore(queuedChipEl, area.firstChild);
+  }
+  const t = queuedMessage.text || "(files attached)";
+  const preview = t.length > 90 ? t.slice(0, 90) + "…" : t;
+  queuedChipEl.innerHTML =
+    '<span aria-hidden="true">⏳</span>' +
+    '<span style="opacity:.7;white-space:nowrap;">Queued — runs next:</span>' +
+    '<span class="queued-msg__text" style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span>' +
+    '<button type="button" class="queued-msg__interrupt" style="flex:none;cursor:pointer;border:1px solid var(--border,#e2e2e2);background:var(--surface,#fff);border-radius:6px;padding:3px 8px;font-size:12px;">Interrupt now</button>' +
+    '<button type="button" class="queued-msg__cancel" aria-label="Cancel queued message" style="flex:none;cursor:pointer;border:1px solid var(--border,#e2e2e2);background:var(--surface,#fff);border-radius:6px;padding:3px 8px;font-size:12px;">✕ Cancel</button>';
+  queuedChipEl.querySelector(".queued-msg__text").textContent = preview;
+  queuedChipEl.querySelector(".queued-msg__interrupt").onclick = interruptWithQueued;
+  queuedChipEl.querySelector(".queued-msg__cancel").onclick = clearQueuedMessage;
+}
+
+// Tear down the superseded run's transient UI so the replacement run renders
+// fresh (called when a barge-in send cancels the active build).
+function supersedeCurrentRun() {
+  stopStreamTimer();
+  clearStreamStatus();
+  const streamingEl = messagesEl.querySelector(".chat-msg--streaming");
+  if (streamingEl) {
+    streamingEl.classList.remove("chat-msg--streaming");
+    const bubble = streamingEl.querySelector(".chat-msg__bubble");
+    if (bubble && !bubble.textContent.trim()) {
+      bubble.innerHTML = '<em class="message__placeholder">Superseded by your next message.</em>';
+    }
+  }
+  removeCheckpointCard();
+  isStreaming = false;
+  agenticRunning = false;
+  streamingMsgEl = null;
+  streamBuffer = "";
+  resetPipelineState();
+}
+
 function finishStreaming() {
   if (!isStreaming) return;
   isStreaming = false;
+  agenticRunning = false;
+  if (inputEl) inputEl.placeholder = chatInputDefaultPlaceholder;
   sendBtn.disabled = false;
+  if (oneShotBtn) oneShotBtn.disabled = false;
   if (typeof window.setSelectModeDisabled === "function") {
     window.setSelectModeDisabled(false);
   }
@@ -2008,6 +2156,24 @@ function finishStreaming() {
   if (streamingEl) {
     streamingEl.classList.remove("chat-msg--streaming");
 
+    // Agentic seams (a checkpoint gate, or a resume that re-parks / just builds
+    // modules) leave a streaming bubble that never received any text or progress
+    // stepper. Don't finalize it into an empty bubble with a lone duration —
+    // drop it (VIB-1876 follow-up). A bubble carrying the pipeline stepper or
+    // any rendered content has child nodes, so it's kept.
+    const bubbleEl = streamingEl.querySelector(".chat-msg__bubble");
+    const hasContent =
+      !!bubbleEl && (bubbleEl.children.length > 0 || bubbleEl.textContent.trim().length > 0);
+    const willRenderText = !!streamBuffer && streamBuffer.trim().length > 0;
+    if (!hasContent && !willRenderText) {
+      streamingEl.remove();
+      streamingMsgEl = null;
+      streamBuffer = "";
+      setStatus("Ready");
+      scrollToBottom();
+      return;
+    }
+
     // Add duration metadata beneath the bubble (inside .chat-msg__content)
     const meta = document.createElement("div");
     meta.className = "chat-msg__meta";
@@ -2246,6 +2412,482 @@ function appendSystemMessage(text) {
   scrollToBottom();
 }
 
+// ---------------------------------------------------------------------------
+// Checkpoint gate card (VIB-1877) — the design preview the user approves /
+// steers / skips / cancels before the expensive module build.
+// ---------------------------------------------------------------------------
+
+let checkpointCardEl = null;
+let currentCheckpointKind = null;
+let currentCheckpointData = null;
+
+function setSendDisabled(disabled) {
+  sendBtn.disabled = disabled;
+  if (oneShotBtn) oneShotBtn.disabled = disabled;
+}
+
+function removeCheckpointCard() {
+  if (checkpointCardEl && checkpointCardEl.parentNode) {
+    checkpointCardEl.parentNode.removeChild(checkpointCardEl);
+  }
+  checkpointCardEl = null;
+}
+
+// One-line record of what the user decided at a checkpoint (VIB-1876). Boris:
+// keep the decision in the transcript rather than dropping the turn entirely.
+function summarizeDecision(kind, action, note, extra) {
+  const label =
+    kind === "brand_intake" ? "Brand" : kind === "structure" ? "Structure" : kind === "plan" ? "Plan" : "Design";
+  if (action === "cancel") return `${label}: cancelled — nothing was built.`;
+  if (action === "steer") return `${label}: steered${note ? " — " + note : ""}.`;
+  if (kind === "brand_intake") {
+    if (action !== "approve") return "Brand: surprise me — generating a design system.";
+    const ch =
+      extra && extra.brandIntake
+        ? Object.keys(extra.brandIntake).filter((k) => extra.brandIntake[k])
+        : [];
+    return `Brand: bringing your brand${ch.length ? " (" + ch.join(", ") + ")" : ""}.`;
+  }
+  if (action === "skip") return `${label}: skipped remaining checkpoints — building now.`;
+  return `${label}: approved.`;
+}
+
+// The substantive content/facts behind a decision (VIB-1876): the palette/type
+// approved, the module outline kept, or the brand inputs provided — so the
+// transcript records *what*, not just the verb. Returns "" when there's nothing.
+function decisionFacts(kind, action, note, extra, data) {
+  if (action === "cancel") return "";
+  if (action === "steer") return note ? "Note: " + note : "";
+  const parts = [];
+  const clip = (s) => String(s).replace(/\s+/g, " ").trim().slice(0, 80);
+  if (kind === "design" || kind === "plan") {
+    const pal = Array.isArray(data && data.palette)
+      ? data.palette.map((p) => p && p.value).filter(Boolean).slice(0, 5)
+      : [];
+    if (pal.length) parts.push("Palette: " + pal.join(", "));
+    const typo = (data && data.typography) || {};
+    if (typo.heading || typo.body) parts.push("Type: " + [typo.heading, typo.body].filter(Boolean).join(" / "));
+  } else if (kind === "structure") {
+    const rows =
+      extra && Array.isArray(extra.outline) && extra.outline.length
+        ? extra.outline
+        : data && Array.isArray(data.modules)
+          ? data.modules
+          : [];
+    const names = rows.map((r) => r && (r.name || r.label)).filter(Boolean);
+    if (names.length) parts.push(`Sections (${names.length}): ` + names.join(", "));
+  } else if (kind === "brand_intake") {
+    const bi = (extra && extra.brandIntake) || {};
+    if (bi.colors) parts.push("Colors: " + clip(bi.colors));
+    if (bi.siteUrl) parts.push("Site: " + clip(bi.siteUrl));
+    if (bi.themePath) parts.push("Theme: " + clip(bi.themePath));
+    if (bi.code) parts.push("Pasted code");
+    if (bi.voice) parts.push("Voice: " + clip(bi.voice));
+  }
+  return parts.join(" · ");
+}
+
+// Convert the live checkpoint card into a static decision record so the turn
+// keeps meaning in the transcript instead of leaving an empty bubble (VIB-1876).
+// Rebuilds a standard assistant bubble (the card renderers use bespoke markup).
+function finalizeCheckpointCard(action, note, extra) {
+  if (!checkpointCardEl) return;
+  const kind = currentCheckpointKind || "design";
+  const text = summarizeDecision(kind, action, note, extra);
+  const facts = decisionFacts(kind, action, note, extra, currentCheckpointData);
+  const glyph = action === "cancel" ? "✕" : "✓";
+  const time = formatMessageTime(Date.now());
+  checkpointCardEl.className = "chat-msg chat-msg--assistant chat-msg--checkpoint-resolved";
+  checkpointCardEl.innerHTML =
+    '<div class="chat-msg__avatar chat-msg__avatar--ai">AI</div>' +
+    '<div class="chat-msg__content">' +
+    '<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="checkpoint-decision" style="opacity:.85;"></div>' +
+    '<div class="checkpoint-decision__facts" style="opacity:.6;font-size:12px;margin-top:2px;"></div>' +
+    "</div></div>";
+  checkpointCardEl.querySelector(".checkpoint-decision").textContent = glyph + " " + text;
+  const factsEl = checkpointCardEl.querySelector(".checkpoint-decision__facts");
+  if (facts) factsEl.textContent = facts;
+  else factsEl.remove();
+  checkpointCardEl = null;
+}
+
+// When a stepper card is left behind (the run parks at a gate), mark the stages
+// it actually reached as done so the older card reads "complete up to here"
+// rather than frozen mid-stage (VIB-1876).
+function finalizeStepperProgress() {
+  if (!pipelineStepperEl) return;
+  pipelineStepperEl.querySelectorAll(".pipeline-stage--active").forEach((el) => {
+    const step = el.getAttribute("data-stage");
+    if (step) setStageStatus(step, "done");
+  });
+}
+
+function handleCheckpointRequested(msg) {
+  // Settle the in-flight progress bubble; the gate now waits on the user.
+  clearStreamStatus();
+  finalizeStepperProgress();
+  finishStreaming();
+  removeCheckpointCard();
+
+  const preview = msg.preview || {};
+  const data = preview.data || {};
+  currentCheckpointKind = preview.kind || "design";
+  currentCheckpointData = data;
+  checkpointCardEl = renderCheckpointCard(preview, data, msg.estCostNext);
+  messagesEl.appendChild(checkpointCardEl);
+  scrollToBottom();
+
+  // Hold the send buttons until the gate is resolved.
+  setSendDisabled(true);
+  setStatus("Awaiting your call");
+}
+
+function handleCheckpointCancelled() {
+  removeCheckpointCard();
+  setSendDisabled(false);
+  appendSystemMessage("Cancelled — nothing was built.");
+  flushQueuedMessage();
+}
+
+function resolveCheckpoint(action, note, extra) {
+  if (!ws || ws.readyState !== WebSocket.OPEN) return;
+  // Leave the decision in the transcript (card → one-line record), not an empty
+  // bubble (VIB-1876).
+  finalizeCheckpointCard(action, note, extra);
+  if (action === "cancel") {
+    setSendDisabled(false);
+  } else {
+    // Work resumes. Don't pre-create an empty bubble — clear the prior turn's
+    // pipeline refs so the resume's first progress event builds its OWN stepper
+    // bubble (ensurePipelineBubble returns early while pipelineBubbleEl is set).
+    isStreaming = true;
+    setSendDisabled(true);
+    pipelineBubbleEl = null;
+    pipelineStepperEl = null;
+    pipelineDetailEl = null;
+    pipelineModulesEl = null;
+    pipelineEstimateEl = null;
+    streamingMsgEl = null;
+    streamStartTime = Date.now();
+    setStatus("Generating...");
+  }
+  ws.send(JSON.stringify({
+    type: "checkpoint_resolve",
+    action,
+    note: note || undefined,
+    // Structure checkpoint (VIB-1879) outline; brand-intake channels (VIB-1878).
+    outline: extra && extra.outline ? extra.outline : undefined,
+    brandIntake: extra && extra.brandIntake ? extra.brandIntake : undefined,
+  }));
+}
+
+function renderCheckpointCard(preview, data, estCostNext) {
+  // Brand-intake gate (VIB-1878) — the front-of-flow ask-back; different card.
+  if (preview && preview.kind === "brand_intake") {
+    return renderBrandIntakeCard(preview, data);
+  }
+  // Structure checkpoint (VIB-1879) renders an editable module outline instead
+  // of the design palette/hero.
+  if (preview && preview.kind === "structure") {
+    return renderStructureCheckpointCard(preview, data, estCostNext);
+  }
+
+  const div = document.createElement("div");
+  div.className = "chat-msg chat-msg--assistant";
+
+  const palette = Array.isArray(data.palette) ? data.palette : [];
+  const swatches = palette.map((p) =>
+    `<div class="checkpoint__swatch" title="${escapeHtml(p.label)}: ${escapeHtml(p.value)}">
+       <span class="checkpoint__swatch-chip" style="background:${escapeHtml(p.value)}"></span>
+       <span class="checkpoint__swatch-label">${escapeHtml(p.label)}</span>
+     </div>`).join("");
+
+  const typo = data.typography || {};
+  const heroSrc = typeof data.heroHtml === "string" ? data.heroHtml : "";
+  const costLine = (typeof estCostNext === "number" && estCostNext > 0)
+    ? `<span class="checkpoint__cost">Building all modules will cost ~$${estCostNext.toFixed(2)}</span>`
+    : "";
+
+  div.innerHTML = `
+    <div class="chat-msg__avatar chat-msg__avatar--ai">AI</div>
+    <div class="chat-msg__content">
+      <div class="checkpoint">
+        <div class="checkpoint__head">
+          <span class="checkpoint__badge">Design checkpoint</span>
+          <span class="checkpoint__headline">${escapeHtml(preview.headline || "Review the design before building")}</span>
+        </div>
+        <div class="checkpoint__hero">
+          <iframe class="checkpoint__hero-frame" title="Hero preview" sandbox="" srcdoc="${escapeHtml(heroSrc)}"></iframe>
+        </div>
+        <div class="checkpoint__tokens">
+          <div class="checkpoint__palette">${swatches || '<span class="checkpoint__muted">No palette tokens</span>'}</div>
+          <div class="checkpoint__type">
+            <div class="checkpoint__type-row" style="font-family:${escapeHtml(typo.heading || "")}">Aa — ${escapeHtml(typo.heading || "Heading font")}</div>
+            <div class="checkpoint__type-row checkpoint__type-row--body" style="font-family:${escapeHtml(typo.body || "")}">Body — ${escapeHtml(typo.body || "Body font")}</div>
+          </div>
+        </div>
+        ${costLine ? `<div class="checkpoint__meta">${costLine}</div>` : ""}
+        <div class="checkpoint__steer hidden">
+          <textarea class="checkpoint__steer-input" rows="2" placeholder="What should change? e.g. warmer palette, bigger headings..."></textarea>
+        </div>
+        <div class="checkpoint__actions">
+          <button class="btn btn--primary checkpoint__btn" data-action="approve">Looks good — build it</button>
+          <button class="btn checkpoint__btn" data-action="steer">Tweak the design</button>
+          <button class="btn checkpoint__btn" data-action="skip" title="Build now and don't ask again this run">Skip checkpoints</button>
+          <button class="btn btn--ghost checkpoint__btn" data-action="cancel">Cancel</button>
+        </div>
+      </div>
+    </div>`;
+
+  const steerWrap = div.querySelector(".checkpoint__steer");
+  const steerInput = div.querySelector(".checkpoint__steer-input");
+  const steerBtn = div.querySelector('.checkpoint__btn[data-action="steer"]');
+  let steerArmed = false;
+
+  div.querySelectorAll(".checkpoint__btn").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const action = btn.dataset.action;
+      // Steer is two-step: first click reveals the note box, second submits.
+      if (action === "steer" && !steerArmed) {
+        steerArmed = true;
+        steerWrap.classList.remove("hidden");
+        steerBtn.textContent = "Apply tweak";
+        if (steerInput) steerInput.focus();
+        return;
+      }
+      const note = action === "steer" && steerInput ? steerInput.value.trim() : undefined;
+      div.querySelectorAll(".checkpoint__btn").forEach((b) => (b.disabled = true));
+      resolveCheckpoint(action, note);
+    });
+  });
+
+  return div;
+}
+
+// Structure checkpoint card (VIB-1879) — the planned module skeleton as an
+// editable outline (reorder / cut / add / rename) before the parallel build.
+function renderStructureCheckpointCard(preview, data, estCostNext) {
+  const div = document.createElement("div");
+  div.className = "chat-msg chat-msg--assistant";
+
+  const modules = Array.isArray(data.modules) ? data.modules : [];
+  const narrative = typeof data.narrative === "string" ? data.narrative : "";
+  const costLine = (typeof estCostNext === "number" && estCostNext > 0)
+    ? `<span class="checkpoint__cost">Building all modules will cost ~$${estCostNext.toFixed(2)}</span>`
+    : "";
+
+  div.innerHTML = `
+    <div class="chat-msg__avatar chat-msg__avatar--ai">AI</div>
+    <div class="chat-msg__content">
+      <div class="checkpoint checkpoint--structure">
+        <div class="checkpoint__head">
+          <span class="checkpoint__badge">Structure checkpoint</span>
+          <span class="checkpoint__headline">${escapeHtml(preview.headline || "Review the structure before building")}</span>
+        </div>
+        ${narrative ? `<div class="checkpoint__narrative">${escapeHtml(narrative)}</div>` : ""}
+        <div class="checkpoint__outline"></div>
+        <button type="button" class="btn btn--ghost checkpoint__add">+ Add section</button>
+        ${costLine ? `<div class="checkpoint__meta">${costLine}</div>` : ""}
+        <div class="checkpoint__steer hidden">
+          <textarea class="checkpoint__steer-input" rows="2" placeholder="What should change? e.g. add a pricing section, drop the FAQ..."></textarea>
+        </div>
+        <div class="checkpoint__actions">
+          <button class="btn btn--primary checkpoint__btn" data-action="approve">Build these sections</button>
+          <button class="btn checkpoint__btn" data-action="steer">Re-plan structure</button>
+          <button class="btn checkpoint__btn" data-action="skip" title="Build now and don't ask again this run">Skip checkpoints</button>
+          <button class="btn btn--ghost checkpoint__btn" data-action="cancel">Cancel</button>
+        </div>
+      </div>
+    </div>`;
+
+  const listEl = div.querySelector(".checkpoint__outline");
+
+  function makeRow(name, description, sourceIndex) {
+    const row = document.createElement("div");
+    row.className = "checkpoint__row";
+    if (sourceIndex != null) row.dataset.sourceIndex = String(sourceIndex);
+    if (description) row.dataset.desc = description;
+    row.innerHTML = `
+      <div class="checkpoint__row-move">
+        <button type="button" class="checkpoint__row-btn" data-move="up" title="Move up" aria-label="Move up">▲</button>
+        <button type="button" class="checkpoint__row-btn" data-move="down" title="Move down" aria-label="Move down">▼</button>
+      </div>
+      <div class="checkpoint__row-main">
+        <input class="checkpoint__row-name" value="${escapeHtml(name || "")}" placeholder="section-name" spellcheck="false" />
+        <span class="checkpoint__row-desc">${escapeHtml(description || "")}</span>
+      </div>
+      <button type="button" class="checkpoint__row-remove" data-remove title="Remove section" aria-label="Remove section">✕</button>`;
+
+    row.querySelector('[data-move="up"]').addEventListener("click", () => {
+      const prev = row.previousElementSibling;
+      if (prev) listEl.insertBefore(row, prev);
+    });
+    row.querySelector('[data-move="down"]').addEventListener("click", () => {
+      const next = row.nextElementSibling;
+      if (next) listEl.insertBefore(next, row);
+    });
+    row.querySelector("[data-remove]").addEventListener("click", () => {
+      row.remove();
+    });
+    return row;
+  }
+
+  modules.forEach((m) =>
+    listEl.appendChild(makeRow(m.name, m.description, m.sourceIndex)),
+  );
+
+  div.querySelector(".checkpoint__add").addEventListener("click", () => {
+    const row = makeRow("", "", null);
+    listEl.appendChild(row);
+    const input = row.querySelector(".checkpoint__row-name");
+    if (input) input.focus();
+  });
+
+  function collectOutline() {
+    return [...listEl.querySelectorAll(".checkpoint__row")]
+      .map((row) => {
+        const name = (row.querySelector(".checkpoint__row-name").value || "").trim();
+        const si = row.dataset.sourceIndex;
+        return {
+          name,
+          description: row.dataset.desc || undefined,
+          sourceIndex: si !== undefined && si !== "" ? Number(si) : undefined,
+        };
+      })
+      .filter((it) => it.name);
+  }
+
+  const steerWrap = div.querySelector(".checkpoint__steer");
+  const steerInput = div.querySelector(".checkpoint__steer-input");
+  const steerBtn = div.querySelector('.checkpoint__btn[data-action="steer"]');
+  let steerArmed = false;
+
+  div.querySelectorAll(".checkpoint__btn").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const action = btn.dataset.action;
+      // Steer is two-step: first click reveals the note box, second submits.
+      if (action === "steer" && !steerArmed) {
+        steerArmed = true;
+        steerWrap.classList.remove("hidden");
+        steerBtn.textContent = "Apply re-plan";
+        if (steerInput) steerInput.focus();
+        return;
+      }
+      const note = action === "steer" && steerInput ? steerInput.value.trim() : undefined;
+      // approve/skip carry the edited outline; steer/cancel don't.
+      const outline = action === "approve" || action === "skip" ? collectOutline() : undefined;
+      div.querySelectorAll(".checkpoint__btn").forEach((b) => (b.disabled = true));
+      resolveCheckpoint(action, note, { outline });
+    });
+  });
+
+  return div;
+}
+
+// ---------------------------------------------------------------------------
+// Brand-intake gate card (VIB-1878) — the front-of-flow ask-back shown when a
+// new page has no style system yet: "Surprise me" (AI invents) vs "Bring your
+// brand" (paste colors/code/voice, or point at a site/theme → seed the design).
+// ---------------------------------------------------------------------------
+
+function renderBrandIntakeCard(preview, data) {
+  const div = document.createElement("div");
+  div.className = "chat-msg chat-msg--assistant";
+
+  const channels = Array.isArray(data.channels) ? data.channels : [];
+  const fields = channels.map((c) => {
+    const id = `brand-${escapeHtml(c.key)}`;
+    const input = c.multiline
+      ? `<textarea class="brand-intake__input" data-key="${escapeHtml(c.key)}" rows="3" placeholder="${escapeHtml(c.placeholder || "")}"></textarea>`
+      : `<input class="brand-intake__input" data-key="${escapeHtml(c.key)}" type="text" placeholder="${escapeHtml(c.placeholder || "")}" />`;
+    return `<label class="brand-intake__field" for="${id}">
+        <span class="brand-intake__label">${escapeHtml(c.label || c.key)}</span>
+        ${input}
+      </label>`;
+  }).join("");
+
+  div.innerHTML = `
+    <div class="chat-msg__avatar chat-msg__avatar--ai">AI</div>
+    <div class="chat-msg__content">
+      <div class="checkpoint brand-intake">
+        <div class="checkpoint__head">
+          <span class="checkpoint__badge">Brand checkpoint</span>
+          <span class="checkpoint__headline">${escapeHtml(preview.headline || "Match your brand, or surprise you?")}</span>
+        </div>
+        <div class="brand-intake__choices">
+          <button class="btn btn--primary brand-intake__choice" data-choice="surprise">
+            <span class="brand-intake__choice-title">${escapeHtml(data.surpriseLabel || "Surprise me")}</span>
+            <span class="brand-intake__choice-hint">${escapeHtml(data.surpriseHint || "")}</span>
+          </button>
+          <button class="btn brand-intake__choice" data-choice="bring">
+            <span class="brand-intake__choice-title">${escapeHtml(data.bringLabel || "Bring your brand")}</span>
+            <span class="brand-intake__choice-hint">${escapeHtml(data.bringHint || "")}</span>
+          </button>
+        </div>
+        <div class="brand-intake__form hidden">
+          ${fields}
+          <div class="brand-intake__form-actions">
+            <button class="btn btn--primary brand-intake__submit">Use my brand</button>
+            <button class="btn btn--ghost brand-intake__back">Back</button>
+          </div>
+        </div>
+        <div class="checkpoint__actions brand-intake__top-actions">
+          <button class="btn btn--ghost checkpoint__btn" data-action="cancel">Cancel</button>
+        </div>
+      </div>
+    </div>`;
+
+  const form = div.querySelector(".brand-intake__form");
+  const choices = div.querySelector(".brand-intake__choices");
+
+  div.querySelector('[data-choice="surprise"]').addEventListener("click", () => {
+    div.querySelectorAll("button").forEach((b) => (b.disabled = true));
+    // "Surprise me" = skip the brand step; the AI invents the design system.
+    resolveCheckpoint("skip");
+  });
+
+  div.querySelector('[data-choice="bring"]').addEventListener("click", () => {
+    if (choices) choices.classList.add("hidden");
+    if (form) form.classList.remove("hidden");
+    const first = div.querySelector(".brand-intake__input");
+    if (first) first.focus();
+  });
+
+  const backBtn = div.querySelector(".brand-intake__back");
+  if (backBtn) backBtn.addEventListener("click", () => {
+    if (form) form.classList.add("hidden");
+    if (choices) choices.classList.remove("hidden");
+  });
+
+  const submitBtn = div.querySelector(".brand-intake__submit");
+  if (submitBtn) submitBtn.addEventListener("click", () => {
+    const brandIntake = {};
+    div.querySelectorAll(".brand-intake__input").forEach((el) => {
+      const v = (el.value || "").trim();
+      if (v) brandIntake[el.dataset.key] = v;
+    });
+    if (Object.keys(brandIntake).length === 0) {
+      // Nothing filled in → treat as "surprise me" rather than a no-op.
+      div.querySelectorAll("button").forEach((b) => (b.disabled = true));
+      resolveCheckpoint("skip");
+      return;
+    }
+    div.querySelectorAll("button").forEach((b) => (b.disabled = true));
+    resolveCheckpoint("approve", undefined, { brandIntake });
+  });
+
+  const cancelBtn = div.querySelector('.checkpoint__btn[data-action="cancel"]');
+  if (cancelBtn) cancelBtn.addEventListener("click", () => {
+    div.querySelectorAll("button").forEach((b) => (b.disabled = true));
+    resolveCheckpoint("cancel");
+  });
+
+  return div;
+}
+
 // ---------------------------------------------------------------------------
 // Version history panel
 // ---------------------------------------------------------------------------
@@ -3137,6 +3779,13 @@ sendBtn.addEventListener("click", () => {
   sendMessage(inputEl.value);
 });
 
+// One-shot button — build the whole page, skipping the design checkpoint.
+if (oneShotBtn) {
+  oneShotBtn.addEventListener("click", () => {
+    sendMessage(inputEl.value, { oneShot: true });
+  });
+}
+
 // Enter to send (Shift+Enter for newline)
 inputEl.addEventListener("keydown", (e) => {
   if (e.key === "Enter" && !e.shiftKey) {