vibespot 1.2.0 → 1.3.0

package/ui/setup.js

@@ -1,25 +1,106 @@
-/* Theme init — runs synchronously before DOM to prevent flash */
+/* Theme init — runs synchronously before DOM to prevent flash.
+   Light is the default to match HubSpot's light-first ecosystem. */
+const VIBESPOT_THEMES = ["dark", "light", "hubspot"];
+const VIBESPOT_THEME_LABELS = {
+  dark: "Dark",
+  light: "Light",
+  hubspot: "HubSpot Light",
+};
 (function initTheme() {
   const stored = localStorage.getItem("vibespot-theme");
-  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-  const theme = stored || (prefersDark ? "dark" : "light");
+  const theme = VIBESPOT_THEMES.includes(stored) ? stored : "light";
   document.documentElement.setAttribute("data-theme", theme);
 })();
 
+function syncThemeToggleLabel() {
+  const btn = document.querySelector(".theme-toggle");
+  if (!btn) return;
+  const current = document.documentElement.getAttribute("data-theme") || "dark";
+  const idx = VIBESPOT_THEMES.indexOf(current);
+  const next = VIBESPOT_THEMES[(idx + 1) % VIBESPOT_THEMES.length];
+  const label = `Theme: ${VIBESPOT_THEME_LABELS[current] || current} — switch to ${VIBESPOT_THEME_LABELS[next] || next}`;
+  btn.setAttribute("title", label);
+  btn.setAttribute("aria-label", label);
+}
+document.addEventListener("DOMContentLoaded", syncThemeToggleLabel);
+
 function toggleTheme() {
   const current = document.documentElement.getAttribute("data-theme") || "dark";
-  const next = current === "dark" ? "light" : "dark";
+  const idx = VIBESPOT_THEMES.indexOf(current);
+  const next = VIBESPOT_THEMES[((idx === -1 ? 0 : idx) + 1) % VIBESPOT_THEMES.length];
   document.documentElement.setAttribute("data-theme", next);
   localStorage.setItem("vibespot-theme", next);
+  syncThemeToggleLabel();
+}
+
+/* ---------------------------------------------------------------------------
+ * HubSpot portal indicator (topbar) — visible in both Project Home and Editor
+ * Reads /api/settings/status and reflects the active HubSpot portal's
+ * connection state. Clicking opens Settings (HubSpot tab).
+ * ------------------------------------------------------------------------- */
+async function refreshPortalIndicator() {
+  const link = document.getElementById("topbar-portal-indicator");
+  const label = document.getElementById("topbar-portal-label");
+  if (!link || !label) return;
+  try {
+    const res = await fetch("/api/settings/status");
+    const data = await res.json();
+    const hs = data && data.environment && data.environment.tools && data.environment.tools.hubspot;
+    if (hs && hs.authenticated && hs.portalName) {
+      const portal = hs.portalId ? `${hs.portalName} (${hs.portalId})` : hs.portalName;
+      link.classList.add("portal-indicator--connected");
+      link.classList.remove("portal-indicator--disconnected");
+      link.setAttribute("title", `Connected to HubSpot portal ${portal}`);
+      link.setAttribute("aria-label", `Connected to HubSpot portal ${portal}`);
+      label.textContent = portal;
+    } else {
+      link.classList.remove("portal-indicator--connected");
+      link.classList.add("portal-indicator--disconnected");
+      link.setAttribute("title", "No HubSpot portal connected — open Settings to add one");
+      link.setAttribute("aria-label", "No HubSpot portal connected — open Settings to add one");
+      label.textContent = "Not connected";
+    }
+  } catch {
+    // Server unreachable — leave the disconnected state in place.
+  }
 }
 
+function bindPortalIndicator() {
+  const link = document.getElementById("topbar-portal-indicator");
+  if (!link || link.dataset.bound === "1") return;
+  link.dataset.bound = "1";
+  link.addEventListener("click", (event) => {
+    event.preventDefault();
+    // In Editor mode, the workspace tab "settings" exists; otherwise the
+    // Project Home settings button opens the same overlay.
+    const editorTab = document.getElementById("ws-tab-settings");
+    const setupBtn = document.getElementById("btn-setup-settings");
+    const appBody = document.getElementById("app-body");
+    const isEditor = appBody && appBody.getAttribute("data-mode") === "editor";
+    const target = isEditor ? editorTab : setupBtn;
+    if (target && typeof target.click === "function") target.click();
+    else if (editorTab) editorTab.click();
+    else if (setupBtn) setupBtn.click();
+  });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  bindPortalIndicator();
+  refreshPortalIndicator();
+});
+
+// Re-poll occasionally so a freshly-saved PAT shows up without reload.
+setInterval(() => { refreshPortalIndicator(); }, 30000);
+
 /**
  * Setup screen — onboarding flow in the browser.
  * Handles theme creation, fetching, opening, and session resume.
  */
 
 const setupScreen = document.getElementById("setup-screen");
-const appScreen = document.getElementById("app-screen");
+const appScreen = document.getElementById("editor");
+const appBody = document.getElementById("app-body");
+let _serverContentMode = "page";
 
 // ---------------------------------------------------------------------------
 // Load setup info on page load
@@ -36,11 +117,11 @@ const ENGINE_DISPLAY_NAMES = {
 
 async function initSetup() {
   try {
-    // Show loading spinner in rail while fetching
-    const railItems = document.getElementById("project-rail-items");
-    if (railItems) {
-      railItems.innerHTML = `
-        <div class="project-rail__loading">
+    // Show loading spinner in switcher while fetching
+    const switcherList = document.getElementById("project-switcher-list");
+    if (switcherList) {
+      switcherList.innerHTML = `
+        <div class="project-switcher__loading">
           <div class="setup__spinner"></div>
           <span>Loading projects...</span>
         </div>`;
@@ -49,7 +130,7 @@ async function initSetup() {
     const res = await fetch("/api/setup");
     const info = await res.json();
 
-    // Populate the project rail with all projects
+    // Populate the project switcher with all projects (used in editor mode)
     populateProjectRail(info);
 
     // Show "Continue where you left off" cards above the create options
@@ -96,29 +177,118 @@ async function initSetup() {
       }, 0);
     }
 
-    // Check if we should show the walkthrough (fresh environment)
+    // First-visit product intro: 3-step walkthrough explaining vibeSpot.
+    // Add ?intro to URL to force-show it for testing.
+    const params = new URLSearchParams(location.search);
+    const introSeen = localStorage.getItem(INTRO_SEEN_KEY) === "1";
+    const isFreshUser = info.sessions.length === 0 && info.localThemes.length === 0;
+    if (params.has("intro") || (!introSeen && isFreshUser)) {
+      showIntroWalkthrough(info);
+      return;
+    }
+
+    // Check if we should show the engine-setup walkthrough (fresh environment).
     // Add ?walkthrough to URL to force-show it for testing
-    if (new URLSearchParams(location.search).has("walkthrough") ||
-        (!info.aiAvailable && info.sessions.length === 0 && info.localThemes.length === 0)) {
+    if (params.has("walkthrough") ||
+        (!info.aiAvailable && isFreshUser)) {
       showWalkthrough();
       return;
     }
 
+    // Track server content mode (email vs page)
+    _serverContentMode = info.contentMode || "page";
+
     // Reset panel state
     remoteThemesLoaded = false;
 
     // Reset starter cache so each visit re-fetches from server
     _startersCache = null;
 
-    // Auto-expand the starter template panel so templates are visible by default
+    // Set warm time-of-day greeting; show asset-type cards as the primary entry.
+    initGuidedEntry();
+
+    // Reset to cards-first state (no panel, prompt hidden).
     activePanel = null;
-    togglePanel("starter");
+    showAssetTypeCards();
 
   } catch (err) {
     showError("Could not connect to server. Is vibeSpot running?");
   }
 }
 
+// ---------------------------------------------------------------------------
+// Guided entry — time-of-day greeting + asset-type card flow (VIB-255)
+// ---------------------------------------------------------------------------
+
+function initGuidedEntry() {
+  const textEl = document.getElementById("setup-greeting-text");
+  if (!textEl) return;
+  const hour = new Date().getHours();
+  let greeting = "Welcome";
+  if (hour < 5) greeting = "Working late";
+  else if (hour < 12) greeting = "Good morning";
+  else if (hour < 17) greeting = "Good afternoon";
+  else greeting = "Good evening";
+  textEl.textContent = greeting;
+}
+
+let _selectedAssetType = null;
+
+function showAssetTypeCards() {
+  const cards = document.getElementById("setup-type-cards");
+  const promptCard = document.getElementById("setup-prompt-card");
+  const recent = document.getElementById("setup-recent");
+  const promptInput = document.getElementById("setup-prompt-input");
+  const question = document.getElementById("setup-question");
+  const importPanel = document.getElementById("setup-import-sources");
+  if (cards) cards.classList.remove("hidden");
+  if (question) question.classList.remove("hidden");
+  if (importPanel) importPanel.classList.add("hidden");
+  if (promptCard) {
+    promptCard.classList.add("hidden");
+    promptCard.dataset.assetType = "";
+  }
+  if (recent && recent.dataset.hasItems === "1") recent.classList.remove("hidden");
+  if (promptInput) {
+    promptInput.value = "";
+    const submit = document.getElementById("setup-prompt-submit");
+    if (submit) submit.disabled = true;
+  }
+  // Close any open advanced panel (e.g. starter grid) when returning to cards.
+  document.querySelectorAll(".setup__panel").forEach((p) => p.classList.add("hidden"));
+  document.querySelectorAll(".setup__action-btn").forEach((b) => b.classList.remove("active"));
+  activePanel = null;
+  _selectedAssetType = null;
+}
+
+function showScopedPrompt(card) {
+  const cards = document.getElementById("setup-type-cards");
+  const promptCard = document.getElementById("setup-prompt-card");
+  const recent = document.getElementById("setup-recent");
+  const eyebrow = document.getElementById("setup-prompt-eyebrow");
+  const input = document.getElementById("setup-prompt-input");
+  if (!promptCard || !input) return;
+
+  const assetType = card.dataset.assetType || "landing-page";
+  const placeholder = card.dataset.promptPlaceholder || "Describe what you want to build...";
+  const label = card.dataset.promptEyebrow || "Project";
+
+  _selectedAssetType = assetType;
+  promptCard.dataset.assetType = assetType;
+  if (eyebrow) eyebrow.textContent = label;
+  input.placeholder = placeholder;
+  input.setAttribute("aria-label", placeholder.replace(/\.\.\.$/, ""));
+
+  // Stash the selected type so downstream session/chat code can read it later.
+  window.__pendingAssetType = assetType;
+
+  if (cards) cards.classList.add("hidden");
+  if (recent) recent.classList.add("hidden");
+  promptCard.classList.remove("hidden");
+
+  setTimeout(() => input.focus(), 60);
+}
+
 async function saveAlertApiKey(key) {
   if (!key) return;
   // Detect provider from key prefix
@@ -169,6 +339,9 @@ function deduplicateProjects(info) {
         updatedAt: s.updatedAt,
         moduleCount: s.moduleCount ?? null,
         templateCount: s.templateCount ?? null,
+        pageCount: s.pageCount ?? 0,
+        emailCount: s.emailCount ?? 0,
+        hasBrandAssets: s.hasBrandAssets ?? false,
       });
     }
   }
@@ -184,6 +357,9 @@ function deduplicateProjects(info) {
         updatedAt: null,
         moduleCount: typeof t === "object" ? t.moduleCount ?? null : null,
         templateCount: null,
+        pageCount: 0,
+        emailCount: 0,
+        hasBrandAssets: false,
       });
     }
   }
@@ -196,6 +372,7 @@ function deduplicateProjects(info) {
 // ---------------------------------------------------------------------------
 
 const RECENT_PROJECTS_LIMIT = 4;
+let _allProjects = [];
 
 function populateRecentProjects(info) {
   const section = document.getElementById("setup-recent");
@@ -205,15 +382,19 @@ function populateRecentProjects(info) {
 
   const projects = deduplicateProjects(info);
   if (projects.length === 0) {
+    _allProjects = [];
     section.classList.add("hidden");
+    section.dataset.hasItems = "0";
     list.innerHTML = "";
     return;
   }
+  section.dataset.hasItems = "1";
 
   // Most recently updated first; locals (no updatedAt) follow
   const withTime = projects.filter((p) => p.updatedAt).sort((a, b) => b.updatedAt - a.updatedAt);
   const withoutTime = projects.filter((p) => !p.updatedAt);
   const ordered = [...withTime, ...withoutTime];
+  _allProjects = ordered;
   const top = ordered.slice(0, RECENT_PROJECTS_LIMIT);
 
   list.innerHTML = "";
@@ -232,6 +413,17 @@ function populateRecentProjects(info) {
       `<span class="setup__recent-card-meta">${esc(meta)}</span>` +
       `</span>`;
 
+    const delBtn = document.createElement("button");
+    delBtn.type = "button";
+    delBtn.className = "setup__recent-card-delete";
+    delBtn.innerHTML = "&times;";
+    delBtn.title = "Delete project";
+    delBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      confirmDeleteProject(p);
+    });
+    card.appendChild(delBtn);
+
     card.addEventListener("click", () => {
       if (typeof isStreaming !== "undefined" && isStreaming) {
         showError("Cannot switch projects while AI is generating.");
@@ -248,40 +440,43 @@ function populateRecentProjects(info) {
 }
 
 // ---------------------------------------------------------------------------
-// Collapsible Project Rail (expanded on setup, collapsed on dashboard/chat)
+// Project switcher (rendered into the editor-mode rail popover)
 // ---------------------------------------------------------------------------
 
 const railTooltip = document.getElementById("project-rail-tooltip");
 
+/**
+ * Populate the project switcher menu with all projects. Item DOM uses the
+ * stable `.project-rail__item*` class names so the rename / delete logic in
+ * chat.js + setup.js can keep targeting them.
+ */
 function populateProjectRail(info) {
-  const rail = document.getElementById("project-rail-items");
-  const countEl = document.getElementById("rail-project-count");
-  if (!rail) return;
-  rail.innerHTML = "";
+  const list = document.getElementById("project-switcher-list");
+  if (!list) return;
+  list.innerHTML = "";
 
   const projects = deduplicateProjects(info);
-  if (countEl) countEl.textContent = projects.length;
 
   if (projects.length === 0) {
-    rail.innerHTML = '<div class="project-rail__empty">No projects yet.<br>Create one to get started.</div>';
+    list.innerHTML = '<div class="project-switcher__empty">No projects yet.<br>Create one to get started.</div>';
     return;
   }
 
   for (const p of projects) {
-    const item = document.createElement("div");
+    const item = document.createElement("button");
+    item.type = "button";
     item.className = "project-rail__item";
     item.dataset.name = p.name;
+    if (p.sessionId) item.dataset.sessionId = p.sessionId;
 
     const initial = p.name.charAt(0).toUpperCase();
     const meta = p.updatedAt ? timeAgo(p.updatedAt) : "on disk";
 
-    // Bubble (always visible — in collapsed mode this is the only thing shown)
     const bubble = document.createElement("div");
     bubble.className = "project-rail__item-bubble";
     bubble.textContent = initial;
     item.appendChild(bubble);
 
-    // Info (visible when expanded via CSS)
     const infoEl = document.createElement("div");
     infoEl.className = "project-rail__item-info";
     infoEl.innerHTML = `
@@ -289,7 +484,6 @@ function populateProjectRail(info) {
       <span class="project-rail__item-meta">${meta}</span>`;
     item.appendChild(infoEl);
 
-    // Double-click on name to rename
     const nameSpan = infoEl.querySelector(".project-rail__item-name");
     if (nameSpan) {
       nameSpan.addEventListener("dblclick", (e) => {
@@ -298,8 +492,8 @@ function populateProjectRail(info) {
       });
     }
 
-    // Delete button (visible when expanded + hover)
     const delBtn = document.createElement("button");
+    delBtn.type = "button";
     delBtn.className = "project-rail__item-delete";
     delBtn.innerHTML = "&times;";
     delBtn.title = "Delete project";
@@ -309,44 +503,17 @@ function populateProjectRail(info) {
     });
     item.appendChild(delBtn);
 
-    // Tooltip (only when collapsed — skip when expanded since name is visible)
-    item.addEventListener("mouseenter", () => {
-      const railEl = document.getElementById("project-rail");
-      if (railEl && railEl.classList.contains("project-rail--expanded")) return;
-
-      let stats = "";
-      if (p.moduleCount != null) {
-        stats = p.moduleCount + " section" + (p.moduleCount !== 1 ? "s" : "");
-        if (p.templateCount > 1) stats += " \u00b7 " + p.templateCount + " templates";
-        stats += p.updatedAt ? " \u00b7 " + timeAgo(p.updatedAt) : " \u00b7 on disk";
-      } else {
-        stats = p.updatedAt ? timeAgo(p.updatedAt) : "on disk";
-      }
-
-      railTooltip.innerHTML =
-        '<div class="project-rail__tooltip-name">' + esc(p.name) + "</div>" +
-        '<div class="project-rail__tooltip-stats">' + stats + "</div>";
-
-      const rect = item.getBoundingClientRect();
-      railTooltip.style.top = rect.top + "px";
-      railTooltip.classList.add("project-rail__tooltip--visible");
-    });
-
-    item.addEventListener("mouseleave", () => {
-      railTooltip.classList.remove("project-rail__tooltip--visible");
-    });
-
-    // Click to open (blocked while AI is generating)
     item.addEventListener("click", () => {
       if (typeof isStreaming !== "undefined" && isStreaming) {
         showError("Cannot switch projects while AI is generating.");
         return;
       }
+      closeProjectSwitcher();
       if (p.sessionId) resumeSession(p.sessionId);
       else openTheme(p.name);
     });
 
-    rail.appendChild(item);
+    list.appendChild(item);
   }
 
   updateRailActive();
@@ -357,14 +524,99 @@ function updateRailActive() {
   document.querySelectorAll(".project-rail__item").forEach((btn) => {
     btn.classList.toggle("project-rail__item--active", btn.dataset.name === current);
   });
+  // Refresh the rail's current-project bubble + name (editor mode only).
+  const bubble = document.getElementById("project-rail-current-bubble");
+  const nameEl = document.getElementById("project-rail-current-name");
+  if (bubble) bubble.textContent = current ? current.charAt(0).toUpperCase() : "P";
+  if (nameEl) nameEl.textContent = current || "";
+  const trigger = document.getElementById("project-rail-current");
+  if (trigger) trigger.title = current ? current + " — switch project" : "Switch project";
+}
+
+// ---------------------------------------------------------------------------
+// Switcher popover open/close
+// ---------------------------------------------------------------------------
+
+function openProjectSwitcher() {
+  const popover = document.getElementById("project-switcher");
+  const trigger = document.getElementById("project-rail-current");
+  if (!popover || !trigger) return;
+  const rect = trigger.getBoundingClientRect();
+  popover.style.top = Math.max(8, rect.top) + "px";
+  popover.hidden = false;
+  trigger.setAttribute("aria-expanded", "true");
+  // Refresh data so the list reflects the latest sessions.
+  fetch("/api/setup")
+    .then((r) => r.json())
+    .then((info) => populateProjectRail(info))
+    .catch(() => {});
+}
+
+function closeProjectSwitcher() {
+  const popover = document.getElementById("project-switcher");
+  const trigger = document.getElementById("project-rail-current");
+  if (popover) popover.hidden = true;
+  if (trigger) trigger.setAttribute("aria-expanded", "false");
+}
+
+function toggleProjectSwitcher() {
+  const popover = document.getElementById("project-switcher");
+  if (!popover) return;
+  if (popover.hidden) openProjectSwitcher();
+  else closeProjectSwitcher();
 }
 
-// "+" button → open New Theme panel (show setup first if needed)
-document.getElementById("project-rail-add")?.addEventListener("click", () => {
-  if (setupScreen.classList.contains("hidden")) showSetup();
+document.getElementById("project-rail-current")?.addEventListener("click", (e) => {
+  e.stopPropagation();
+  toggleProjectSwitcher();
+});
+
+document.getElementById("project-rail-back")?.addEventListener("click", () => {
+  if (typeof isStreaming !== "undefined" && isStreaming) {
+    showError("Cannot leave the editor while AI is generating.");
+    return;
+  }
+  closeProjectSwitcher();
+  showSetup();
+});
+
+document.getElementById("project-switcher-add")?.addEventListener("click", () => {
+  closeProjectSwitcher();
+  showSetup();
   togglePanel("new");
 });
 
+// Close on outside click / Escape
+document.addEventListener("click", (e) => {
+  const popover = document.getElementById("project-switcher");
+  if (!popover || popover.hidden) return;
+  const trigger = document.getElementById("project-rail-current");
+  if (popover.contains(e.target) || (trigger && trigger.contains(e.target))) return;
+  closeProjectSwitcher();
+});
+
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") closeProjectSwitcher();
+});
+
+// Tooltip on the current-project bubble (editor rail)
+document.getElementById("project-rail-current")?.addEventListener("mouseenter", () => {
+  const popover = document.getElementById("project-switcher");
+  if (popover && !popover.hidden) return;
+  const name = currentAppTheme || currentDashboardTheme || "";
+  if (!name) return;
+  railTooltip.innerHTML =
+    '<div class="project-rail__tooltip-name">' + esc(name) + "</div>" +
+    '<div class="project-rail__tooltip-stats">Click to switch project</div>';
+  const rect = document.getElementById("project-rail-current").getBoundingClientRect();
+  railTooltip.style.top = rect.top + "px";
+  railTooltip.classList.add("project-rail__tooltip--visible");
+});
+
+document.getElementById("project-rail-current")?.addEventListener("mouseleave", () => {
+  railTooltip.classList.remove("project-rail__tooltip--visible");
+});
+
 // ---------------------------------------------------------------------------
 // Inline rename
 // ---------------------------------------------------------------------------
@@ -497,6 +749,146 @@ function confirmDeleteProject(project) {
   });
 }
 
+// ---------------------------------------------------------------------------
+// First-visit product intro walkthrough (3 steps)
+// ---------------------------------------------------------------------------
+
+const INTRO_SEEN_KEY = "vibespot:introSeen";
+const INTRO_SAMPLE_PROMPT =
+  "A landing page for a B2B SaaS product called Northwind Analytics. " +
+  "Include a hero with a headline and CTA, three feature cards, a customer logo bar, " +
+  "a testimonial, and a final call-to-action section.";
+
+function renderIntroProgress(stepIndex, totalSteps) {
+  let html = "";
+  for (let i = 0; i < totalSteps; i++) {
+    const cls = i === stepIndex ? "active" : i < stepIndex ? "done" : "";
+    html += `<div class="walkthrough__step-dot ${cls}">${i < stepIndex ? vsIcon("check", {size: "sm"}) : i + 1}</div>`;
+    if (i < totalSteps - 1) html += `<div class="walkthrough__step-line"></div>`;
+  }
+  return html;
+}
+
+function dismissIntroWalkthrough(info) {
+  try { localStorage.setItem(INTRO_SEEN_KEY, "1"); } catch {}
+  const url = new URL(location.href);
+  if (url.searchParams.has("intro")) {
+    url.searchParams.delete("intro");
+    history.replaceState(null, "", url.pathname + url.search + url.hash);
+  }
+  document.getElementById("walkthrough").classList.add("hidden");
+  // If the user still has no AI engine on a fresh install, fall through to
+  // the engine-setup walkthrough; otherwise reveal the normal setup options.
+  if (info && !info.aiAvailable && (info.sessions || []).length === 0 && (info.localThemes || []).length === 0) {
+    showWalkthrough();
+  } else {
+    document.getElementById("setup-options").classList.remove("hidden");
+  }
+}
+
+function showIntroWalkthrough(info) {
+  const walkthrough = document.getElementById("walkthrough");
+  const options = document.getElementById("setup-options");
+  const progress = document.getElementById("walkthrough-progress");
+  const content = document.getElementById("walkthrough-content");
+  if (!walkthrough || !options || !progress || !content) return;
+
+  walkthrough.classList.remove("hidden");
+  options.classList.add("hidden");
+
+  const STEPS = [
+    {
+      title: "Welcome to vibeSpot",
+      body: `
+        <p>vibeSpot turns plain-language descriptions into native HubSpot CMS landing pages.
+        Describe what you want, watch a live preview build, then upload the result straight to HubSpot.</p>
+        <ul class="walkthrough__bullets">
+          <li>Chat-driven editing with a side-by-side preview</li>
+          <li>Generates real HubL modules, not screenshots or mockups</li>
+          <li>Works with Claude, OpenAI, or Gemini &mdash; API key or CLI</li>
+        </ul>
+      `,
+    },
+    {
+      title: "How it maps to HubSpot",
+      body: `
+        <p>Every vibeSpot page becomes a fully editable HubSpot theme. The pieces line up like this:</p>
+        <ul class="walkthrough__bullets">
+          <li><strong>Sections</strong> &rarr; HubSpot <strong>modules</strong> with editable fields</li>
+          <li><strong>Shared CSS &amp; tokens</strong> &rarr; theme-level <code>:root</code> variables</li>
+          <li><strong>Project</strong> &rarr; uploadable <strong>HubSpot CMS theme</strong> with templates</li>
+        </ul>
+        <p>Marketers can keep editing fields in HubSpot after upload &mdash; no code changes required.</p>
+      `,
+    },
+    {
+      title: "Try it with a pre-filled prompt",
+      body: `
+        <p>We&rsquo;ll drop a sample prompt into the builder so you can see vibeSpot in action.
+        You can edit it before pressing <strong>Build</strong>.</p>
+        <div class="walkthrough__card walkthrough__sample-prompt">
+          <div class="walkthrough__card-title">Sample prompt</div>
+          <div class="walkthrough__sample-prompt-body">${esc(INTRO_SAMPLE_PROMPT)}</div>
+        </div>
+      `,
+    },
+  ];
+
+  let stepIndex = 0;
+
+  function render() {
+    const step = STEPS[stepIndex];
+    progress.innerHTML = renderIntroProgress(stepIndex, STEPS.length);
+
+    const isLast = stepIndex === STEPS.length - 1;
+    const primaryLabel = isLast ? "Try it now" : "Next";
+    const backBtn = stepIndex > 0
+      ? `<button class="btn btn--secondary" id="intro-back">Back</button>`
+      : "";
+
+    content.innerHTML = `
+      <div class="walkthrough__step-title">${esc(step.title)}</div>
+      <div class="walkthrough__step-desc">${step.body}</div>
+      <div class="walkthrough__actions">
+        <button class="btn btn--ghost" id="intro-skip">Skip intro</button>
+        <span class="walkthrough__actions-spacer"></span>
+        ${backBtn}
+        <button class="btn btn--primary" id="intro-next">${primaryLabel}</button>
+      </div>
+    `;
+
+    document.getElementById("intro-skip").addEventListener("click", () => dismissIntroWalkthrough(info));
+    document.getElementById("intro-next").addEventListener("click", () => {
+      if (isLast) {
+        // Pre-fill the prompt and hand off to the normal builder flow.
+        const promptInput = document.getElementById("setup-prompt-input");
+        if (promptInput) {
+          promptInput.value = INTRO_SAMPLE_PROMPT;
+          promptInput.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+        dismissIntroWalkthrough(info);
+        // Focus the prompt so the user lands ready to edit / submit.
+        setTimeout(() => {
+          const el = document.getElementById("setup-prompt-input");
+          if (el) {
+            el.focus();
+            if (typeof el.scrollIntoView === "function") {
+              el.scrollIntoView({ behavior: "smooth", block: "center" });
+            }
+          }
+        }, 0);
+        return;
+      }
+      stepIndex++;
+      render();
+    });
+    const backEl = document.getElementById("intro-back");
+    if (backEl) backEl.addEventListener("click", () => { stepIndex--; render(); });
+  }
+
+  render();
+}
+
 // ---------------------------------------------------------------------------
 // Guided walkthrough (first-run experience)
 // ---------------------------------------------------------------------------
@@ -765,10 +1157,12 @@ async function startFromPrompt() {
   showLoading("Creating theme...");
 
   try {
+    const createBody = { name: themeName };
+    if (window.__pendingAssetType) createBody.assetType = window.__pendingAssetType;
     const res = await fetch("/api/setup/create", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ name: themeName }),
+      body: JSON.stringify(createBody),
     });
     const data = await res.json();
 
@@ -833,7 +1227,10 @@ function renderStarterGrid(starters) {
     return;
   }
 
-  grid.innerHTML = starters.map((s) => `
+  const pageStarters = starters.filter((s) => s.contentType !== "email");
+  const emailStarters = starters.filter((s) => s.contentType === "email");
+
+  const renderCards = (list) => list.map((s) => `
     <div class="starter-card${_selectedStarterId === s.id ? " selected" : ""}" data-starter-id="${escHtml(s.id)}">
       <span class="starter-card__name">${escHtml(s.name)}</span>
       <span class="starter-card__desc">${escHtml(s.description)}</span>
@@ -841,6 +1238,22 @@ function renderStarterGrid(starters) {
     </div>
   `).join("");
 
+  const renderGroup = (title, list) =>
+    `<div class="starter-grid__group">
+      <h4 class="starter-grid__heading">${escHtml(title)}</h4>
+      <div class="starter-grid__section">${renderCards(list)}</div>
+    </div>`;
+
+  let html = "";
+  if (_serverContentMode === "email") {
+    if (emailStarters.length > 0) html += renderGroup("Email Templates", emailStarters);
+    if (pageStarters.length > 0) html += renderGroup("Page Templates", pageStarters);
+  } else {
+    if (pageStarters.length > 0) html += renderGroup("Page Templates", pageStarters);
+    if (emailStarters.length > 0) html += renderGroup("Email Templates", emailStarters);
+  }
+  grid.innerHTML = html;
+
   grid.querySelectorAll(".starter-card").forEach((card) => {
     card.addEventListener("click", () => selectStarter(card.dataset.starterId));
   });
@@ -892,7 +1305,8 @@ async function createFromStarter() {
 }
 
 async function fetchTheme() {
-  const name = document.getElementById("fetch-theme-name").value.trim();
+  const nameEl = document.getElementById("fetch-theme-name") || document.getElementById("dl-theme-name");
+  const name = nameEl ? nameEl.value.trim() : "";
   if (!name) {
     showError("Please enter the theme name from your HubSpot account.");
     return;
@@ -997,16 +1411,12 @@ function showApp(themeName) {
  * Used as fallback or when navigating from dashboard to a specific template.
  */
 function showAppDirect(themeName) {
-  setupScreen.classList.add("hidden");
-  document.getElementById("setup-topbar").classList.add("hidden");
-  document.getElementById("project-rail")?.classList.remove("project-rail--expanded");
   if (typeof hideDashboard === "function") hideDashboard();
+  appBody.dataset.mode = "editor";
   appScreen.classList.remove("hidden");
+  document.getElementById("project-rail")?.setAttribute("data-mode", "editor");
   document.getElementById("theme-name").textContent = themeName;
 
-  const urlEl = document.getElementById("browser-url");
-  if (urlEl) urlEl.textContent = themeName + ".vibespot.app";
-
   currentAppTheme = themeName;
   const target = "#/app/" + encodeURIComponent(themeName);
   if (location.hash !== target) {
@@ -1025,9 +1435,9 @@ function showAppDirect(themeName) {
 function showSetup() {
   appScreen.classList.add("hidden");
   if (typeof hideDashboard === "function") hideDashboard();
-  setupScreen.classList.remove("hidden");
-  document.getElementById("setup-topbar").classList.remove("hidden");
-  document.getElementById("project-rail")?.classList.add("project-rail--expanded");
+  appBody.dataset.mode = "project-home";
+  document.getElementById("project-rail")?.setAttribute("data-mode", "project-home");
+  closeProjectSwitcher();
   currentAppTheme = "";
 
   hideLoading();
@@ -1040,25 +1450,16 @@ function showSetup() {
   initSetup();
 }
 
-// App back button → go back to dashboard from chat
-document.getElementById("app-back")?.addEventListener("click", () => {
-  if (currentAppTheme && typeof showDashboard === "function") {
-    appScreen.classList.add("hidden");
-    showDashboard(currentAppTheme);
-  }
+// Editor back button → go back to setup
+document.getElementById("editor-back")?.addEventListener("click", () => {
+  showSetup();
 });
 
-// Logo click → go back to setup (from dashboard)
+// Logo click → go back to setup
 document.querySelectorAll(".topbar__brand").forEach((el) => {
   el.style.cursor = "pointer";
   el.addEventListener("click", () => {
-    const dashEl = document.getElementById("dashboard-screen");
-    if (dashEl && !dashEl.classList.contains("hidden")) {
-      showSetup();
-      return;
-    }
-    // Fallback
-    if (!appScreen.classList.contains("hidden")) {
+    if (appBody.dataset.mode === "editor") {
       showSetup();
     }
   });
@@ -1097,7 +1498,7 @@ let remoteThemesLoaded = false;
 
 function togglePanel(action) {
   const panels = document.querySelectorAll(".setup__panel");
-  const buttons = document.querySelectorAll(".setup__action-btn");
+  const buttons = document.querySelectorAll(".setup__entry-card");
 
   // Close if same panel clicked
   if (activePanel === action) {
@@ -1118,8 +1519,8 @@ function togglePanel(action) {
     activePanel = action;
   }
 
-  // Mark button active
-  const btn = document.querySelector(`.setup__action-btn[data-action="${action}"]`);
+  // Mark card active
+  const btn = document.querySelector(`.setup__entry-card[data-action="${action}"]`);
   if (btn) btn.classList.add("active");
 
   // Focus input if applicable
@@ -1135,39 +1536,225 @@ function togglePanel(action) {
   if (action === "continue") populateContinuePanel();
 }
 
+let _bulkSelected = new Set();
+
 function populateContinuePanel() {
   const container = document.getElementById("continue-projects");
   const empty = document.getElementById("continue-empty");
   if (!container) return;
 
-  // Gather projects from the rail
-  const railItems = document.querySelectorAll(".project-rail__item");
-  if (railItems.length === 0) {
+  const projects = _allProjects;
+  if (!projects || projects.length === 0) {
     container.innerHTML = "";
-    empty.classList.remove("hidden");
+    _bulkSelected.clear();
+    if (empty) empty.classList.remove("hidden");
     return;
   }
 
-  empty.classList.add("hidden");
-  container.innerHTML = "";
+  if (empty) empty.classList.add("hidden");
+  _bulkSelected.clear();
+
+  const toolbar = document.createElement("div");
+  toolbar.className = "projects-bulk-toolbar hidden";
+  toolbar.id = "projects-bulk-toolbar";
+  toolbar.innerHTML =
+    `<span class="projects-bulk-toolbar__count" id="bulk-count">0 selected</span>` +
+    `<button type="button" class="btn btn--sm btn--secondary" id="bulk-duplicate">Duplicate</button>` +
+    `<button type="button" class="btn btn--sm btn--danger" id="bulk-delete">Delete</button>`;
+
+  const table = document.createElement("table");
+  table.className = "projects-table";
+  table.innerHTML = `<thead><tr>
+    <th class="projects-table__th-check"><input type="checkbox" id="bulk-select-all" class="projects-table__checkbox" title="Select all" /></th>
+    <th>Name</th>
+    <th>Pages</th>
+    <th>Emails</th>
+    <th>Modules</th>
+    <th>Brand Assets</th>
+    <th></th>
+  </tr></thead>`;
+
+  const tbody = document.createElement("tbody");
+  for (const p of projects) {
+    const tr = document.createElement("tr");
+    tr.dataset.projectName = p.name;
+
+    const checkTd = document.createElement("td");
+    checkTd.className = "projects-table__td-check";
+    const cb = document.createElement("input");
+    cb.type = "checkbox";
+    cb.className = "projects-table__checkbox";
+    cb.dataset.projectName = p.name;
+    cb.addEventListener("change", () => {
+      if (cb.checked) _bulkSelected.add(p.name);
+      else _bulkSelected.delete(p.name);
+      tr.classList.toggle("projects-table__row--selected", cb.checked);
+      syncBulkToolbar();
+    });
+    checkTd.appendChild(cb);
+    tr.appendChild(checkTd);
+
+    const nameTd = document.createElement("td");
+    nameTd.className = "projects-table__name";
+    nameTd.textContent = p.name;
+    tr.appendChild(nameTd);
+
+    for (const val of [p.pageCount ?? 0, p.emailCount ?? 0, p.moduleCount ?? 0]) {
+      const td = document.createElement("td");
+      td.textContent = String(val);
+      tr.appendChild(td);
+    }
+
+    const brandTd = document.createElement("td");
+    brandTd.textContent = p.hasBrandAssets ? "✓" : "—";
+    tr.appendChild(brandTd);
+
+    const actionsCell = document.createElement("td");
+    actionsCell.className = "projects-table__actions";
+    tr.appendChild(actionsCell);
 
-  railItems.forEach((item) => {
-    const name = item.dataset.name || item.querySelector(".project-rail__name")?.textContent || "";
-    const sessionId = item.dataset.sessionId || "";
-    const meta = item.querySelector(".project-rail__meta")?.textContent || "";
-
-    const pill = document.createElement("button");
-    pill.className = "setup__pill";
-    pill.innerHTML = `<span>${esc(name)}</span>${meta ? `<span class="setup__pill__meta">${esc(meta)}</span>` : ""}`;
-    pill.addEventListener("click", () => {
-      if (sessionId) {
-        resumeSession(sessionId);
-      } else {
-        openTheme(name);
+    const openBtn = document.createElement("button");
+    openBtn.type = "button";
+    openBtn.className = "btn btn--sm btn--primary";
+    openBtn.textContent = "Open";
+    openBtn.addEventListener("click", () => {
+      if (typeof isStreaming !== "undefined" && isStreaming) {
+        showError("Cannot switch projects while AI is generating.");
+        return;
       }
+      if (p.sessionId) resumeSession(p.sessionId);
+      else openTheme(p.name);
+    });
+    actionsCell.appendChild(openBtn);
+
+    const delBtn = document.createElement("button");
+    delBtn.type = "button";
+    delBtn.className = "btn btn--sm btn--danger";
+    delBtn.textContent = "Delete";
+    delBtn.addEventListener("click", () => {
+      confirmDeleteProject(p);
     });
-    container.appendChild(pill);
+    actionsCell.appendChild(delBtn);
+
+    tbody.appendChild(tr);
+  }
+  table.appendChild(tbody);
+
+  container.innerHTML = "";
+  container.appendChild(toolbar);
+  container.appendChild(table);
+
+  const selectAll = document.getElementById("bulk-select-all");
+  selectAll.addEventListener("change", () => {
+    const cbs = container.querySelectorAll("tbody .projects-table__checkbox");
+    cbs.forEach((c) => {
+      c.checked = selectAll.checked;
+      const name = c.dataset.projectName;
+      const row = c.closest("tr");
+      if (selectAll.checked) _bulkSelected.add(name);
+      else _bulkSelected.delete(name);
+      if (row) row.classList.toggle("projects-table__row--selected", selectAll.checked);
+    });
+    syncBulkToolbar();
   });
+
+  document.getElementById("bulk-delete").addEventListener("click", () => bulkDeleteProjects());
+  document.getElementById("bulk-duplicate").addEventListener("click", () => bulkDuplicateProjects());
+}
+
+function syncBulkToolbar() {
+  const toolbar = document.getElementById("projects-bulk-toolbar");
+  const countEl = document.getElementById("bulk-count");
+  const selectAll = document.getElementById("bulk-select-all");
+  if (!toolbar) return;
+
+  const n = _bulkSelected.size;
+  toolbar.classList.toggle("hidden", n === 0);
+  if (countEl) countEl.textContent = `${n} selected`;
+
+  if (selectAll) {
+    const total = document.querySelectorAll("#continue-projects tbody .projects-table__checkbox").length;
+    selectAll.checked = n > 0 && n === total;
+    selectAll.indeterminate = n > 0 && n < total;
+  }
+}
+
+function bulkDeleteProjects() {
+  if (_bulkSelected.size === 0) return;
+  const names = [..._bulkSelected];
+  const projects = _allProjects.filter((p) => names.includes(p.name));
+
+  const overlay = document.createElement("div");
+  overlay.className = "confirm-overlay";
+  overlay.innerHTML = `
+    <div class="confirm-dialog">
+      <div class="confirm-dialog__title">Delete ${projects.length} project${projects.length > 1 ? "s" : ""}?</div>
+      <div class="confirm-dialog__detail">${projects.map((p) => `<strong>${esc(p.name)}</strong>`).join(", ")}</div>
+      <label class="confirm-dialog__check">
+        <input type="checkbox" id="confirm-bulk-delete-files" checked />
+        <span>Also delete local files</span>
+      </label>
+      <p class="confirm-dialog__warn">Deleting local files cannot be undone.</p>
+      <div class="confirm-dialog__actions">
+        <button class="btn btn--secondary" id="confirm-bulk-cancel">Cancel</button>
+        <button class="btn btn--danger" id="confirm-bulk-delete">Delete</button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+
+  document.getElementById("confirm-bulk-cancel").addEventListener("click", () => overlay.remove());
+  overlay.addEventListener("click", (e) => { if (e.target === overlay) overlay.remove(); });
+
+  document.getElementById("confirm-bulk-delete").addEventListener("click", async () => {
+    const deleteFiles = document.getElementById("confirm-bulk-delete-files").checked;
+    overlay.remove();
+
+    for (const p of projects) {
+      try {
+        if (p.sessionId) {
+          await fetch("/api/themes", {
+            method: "DELETE",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ sessionId: p.sessionId, deleteFiles }),
+          });
+        } else if (deleteFiles) {
+          await fetch("/api/themes/delete-local", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ themeName: p.name }),
+          });
+        }
+      } catch { /* continue deleting others */ }
+    }
+    _bulkSelected.clear();
+    await initSetup();
+    populateContinuePanel();
+  });
+}
+
+async function bulkDuplicateProjects() {
+  if (_bulkSelected.size === 0) return;
+  const names = [..._bulkSelected];
+  const projects = _allProjects.filter((p) => names.includes(p.name) && p.sessionId);
+
+  if (projects.length === 0) {
+    showError("Only saved projects can be duplicated.");
+    return;
+  }
+
+  for (const p of projects) {
+    try {
+      await fetch("/api/themes/duplicate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sessionId: p.sessionId }),
+      });
+    } catch { /* continue */ }
+  }
+  _bulkSelected.clear();
+  await initSetup();
+  populateContinuePanel();
 }
 
 async function loadDownloadPanel() {
@@ -1224,7 +1811,7 @@ function initDlAccountSwitch(accounts, activeId) {
     let html = '<div style="display:flex;flex-direction:column;gap:6px">';
     for (const acct of accounts) {
       const isActive = acct.portalId === activeId;
-      html += `<button class="btn btn--${isActive ? "primary" : "secondary"} dl-acct-btn" data-portal="${esc(acct.portalId)}" style="text-align:left;padding:6px 12px;font-size:13px">${esc(acct.portalName || acct.portalId)} (${esc(acct.portalId)})${isActive ? " ✓" : ""}</button>`;
+      html += `<button class="btn btn--${isActive ? "primary" : "secondary"} dl-acct-btn" data-portal="${esc(acct.portalId)}" style="text-align:left;padding:6px 12px;font-size:13px">${esc(acct.portalName || acct.portalId)} (${esc(acct.portalId)})${isActive ? ' <span class="vs-icon-inline">' + vsIcon("check", {size: "sm"}) + '</span>' : ""}</button>`;
     }
     html += `<button class="btn btn--secondary dl-acct-btn" data-portal="__new" style="text-align:left;padding:6px 12px;font-size:13px">+ Add another account</button>`;
     html += '</div>';
@@ -1279,33 +1866,59 @@ async function downloadThemeByName() {
 // Event listeners
 // ---------------------------------------------------------------------------
 
-// Action buttons (advanced "More ways to start" panel)
-document.querySelectorAll(".setup__action-btn").forEach((btn) => {
-  btn.addEventListener("click", () => togglePanel(btn.dataset.action));
+// Asset-type cards (guided entry — VIB-255). The "From Template" card opens
+// the existing starter grid; "Import" shows source picker; others reveal a
+// pre-scoped describe prompt.
+document.querySelectorAll(".setup__type-card").forEach((card) => {
+  card.addEventListener("click", () => {
+    const action = card.dataset.action;
+    if (action === "starter") {
+      activePanel = null;
+      togglePanel("starter");
+      setTimeout(() => {
+        document.getElementById("panel-starter")?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }, 60);
+      return;
+    }
+    const assetType = card.dataset.assetType;
+    if (assetType === "import") {
+      showImportSources();
+      return;
+    }
+    showScopedPrompt(card);
+  });
 });
 
-// Secondary "Start from Template" button — always opens, never toggles closed
-document.querySelectorAll(".setup__secondary-btn").forEach((btn) => {
-  btn.addEventListener("click", () => {
-    activePanel = null;
-    togglePanel(btn.dataset.action);
-    setTimeout(() => {
-      document.getElementById("panel-starter")?.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    }, 60);
-  });
+// "Back" link inside the scoped describe prompt restores the asset-type cards.
+document.getElementById("setup-prompt-back")?.addEventListener("click", () => {
+  showAssetTypeCards();
 });
 
-// "More ways to start" toggle
-function expandMoreOptions(expand) {
-  const toggle = document.getElementById("setup-more-toggle");
-  const panel = document.getElementById("setup-more-panel");
-  if (!toggle || !panel) return;
-  const willExpand = expand ?? panel.classList.contains("hidden");
-  panel.classList.toggle("hidden", !willExpand);
-  toggle.setAttribute("aria-expanded", willExpand ? "true" : "false");
-  toggle.classList.toggle("setup__more-toggle--open", willExpand);
+// Import source picker
+function showImportSources() {
+  const cards = document.getElementById("setup-type-cards");
+  const importPanel = document.getElementById("setup-import-sources");
+  const question = document.getElementById("setup-question");
+  if (cards) cards.classList.add("hidden");
+  if (question) question.classList.add("hidden");
+  if (importPanel) importPanel.classList.remove("hidden");
 }
-document.getElementById("setup-more-toggle")?.addEventListener("click", () => expandMoreOptions());
+
+document.getElementById("setup-import-back")?.addEventListener("click", () => {
+  const importPanel = document.getElementById("setup-import-sources");
+  if (importPanel) importPanel.classList.add("hidden");
+  showAssetTypeCards();
+});
+
+document.querySelectorAll(".setup__import-btn").forEach((btn) => {
+  btn.addEventListener("click", () => {
+    const action = btn.dataset.action;
+    const importPanel = document.getElementById("setup-import-sources");
+    if (importPanel) importPanel.classList.add("hidden");
+    showAssetTypeCards();
+    togglePanel(action);
+  });
+});
 
 // "View all" link in recent projects → open the full Continue panel
 document.getElementById("setup-recent-all")?.addEventListener("click", () => {
@@ -1739,8 +2352,7 @@ function handleRoute() {
   if (appTemplateMatch) {
     const themeName = decodeURIComponent(appTemplateMatch[1]);
     const templateId = decodeURIComponent(appTemplateMatch[2]);
-    // Already showing this — nothing to do
-    if (currentAppTheme === themeName && !appScreen.classList.contains("hidden")) return;
+    if (currentAppTheme === themeName && appBody.dataset.mode === "editor") return;
     // Open theme then activate template
     openTheme(themeName).then(() => {
       if (typeof showChat === "function") {
@@ -1754,24 +2366,22 @@ function handleRoute() {
   const appMatch = hash.match(/^#\/app\/([^/]+)$/);
   if (appMatch) {
     const themeName = decodeURIComponent(appMatch[1]);
-    if (currentAppTheme === themeName && !appScreen.classList.contains("hidden")) return;
+    if (currentAppTheme === themeName && appBody.dataset.mode === "editor") return;
     openTheme(themeName);
     return;
   }
 
-  // #/dashboard/{themeName} → show dashboard for theme
+  // #/dashboard/{themeName} → show editor for theme
   const dashMatch = hash.match(/^#\/dashboard\/(.+)$/);
   if (dashMatch) {
     const themeName = decodeURIComponent(dashMatch[1]);
-    const dashEl = document.getElementById("dashboard-screen");
-    if (currentDashboardTheme === themeName && dashEl && !dashEl.classList.contains("hidden")) return;
+    if (currentDashboardTheme === themeName && appBody.dataset.mode === "editor") return;
     openTheme(themeName);
     return;
   }
 
   // Default: show setup
-  const dashEl = document.getElementById("dashboard-screen");
-  if (!appScreen.classList.contains("hidden") || (dashEl && !dashEl.classList.contains("hidden"))) {
+  if (appBody.dataset.mode === "editor") {
     showSetup();
   }
 }