vibespot 1.1.1 → 1.3.0

package/ui/dashboard.js

@@ -3,7 +3,7 @@
  * Sits between setup (project list) and chat (template editing).
  */
 
-const dashboardScreen = document.getElementById("dashboard-screen");
+const dashboardScreen = document.getElementById("editor");
 
 // Page type labels for display
 const PAGE_TYPE_LABELS = {
@@ -26,27 +26,29 @@ const PAGE_TYPE_FULL_LABELS = {
 
 let currentDashboardTheme = "";
 let currentDashboardSessionId = "";
+let currentDashboardIsImported = false;
 
 async function showDashboard(themeName) {
   currentDashboardTheme = themeName;
 
-  // Hide other screens
-  setupScreen.classList.add("hidden");
-  document.getElementById("setup-topbar").classList.add("hidden");
-  document.getElementById("project-rail")?.classList.remove("project-rail--expanded");
-  appScreen.classList.add("hidden");
+  const ab = document.getElementById("app-body");
+  if (ab) ab.dataset.mode = "editor";
+  document.getElementById("project-rail")?.setAttribute("data-mode", "editor");
   dashboardScreen.classList.remove("hidden");
 
-  document.getElementById("dashboard-theme-name").textContent = themeName;
-  document.getElementById("dashboard-theme-heading").textContent = themeName;
-  document.getElementById("dashboard-theme-path-text").textContent = "";
+  document.getElementById("theme-name").textContent = themeName;
+  if (typeof updateRailActive === "function") updateRailActive();
 
   // Get sessionId for the active theme
   try {
     const themesRes = await fetch("/api/themes");
     const themesData = await themesRes.json();
     currentDashboardSessionId = themesData.activeTheme?.id || "";
-  } catch { currentDashboardSessionId = ""; }
+    currentDashboardIsImported = !!themesData.activeTheme?.isImported;
+  } catch {
+    currentDashboardSessionId = "";
+    currentDashboardIsImported = false;
+  }
 
   // Update URL
   const target = "#/dashboard/" + encodeURIComponent(themeName);
@@ -56,11 +58,18 @@ async function showDashboard(themeName) {
 
   // Load dashboard data
   await refreshDashboard();
+
+  // Establish WebSocket so the page tree (populated via WS init message)
+  // and chat input work immediately — without this, a browser refresh
+  // leaves the page tree empty and the chat send button inert.
+  if (typeof connectWebSocket === "function") {
+    connectWebSocket();
+  }
 }
 
 function hideDashboard() {
-  dashboardScreen.classList.add("hidden");
   currentDashboardTheme = "";
+  currentDashboardIsImported = false;
   closeModulePreview();
 }
 
@@ -77,16 +86,196 @@ async function refreshDashboard() {
       return;
     }
     renderTemplateList(data.templates || []);
+    renderProjectAssets(data.templates || []);
     renderModuleLibrary(data.moduleLibrary || []);
     renderBrandAssets(data.brandAssets || {});
-    if (data.themePath) {
-      document.getElementById("dashboard-theme-path-text").textContent = data.themePath;
+    await loadFontList();
+    renderBrandKit(data.brandAssets?.brandKit || null);
+    const pathEl = document.getElementById("dashboard-theme-path-text");
+    if (data.themePath && pathEl) {
+      pathEl.textContent = data.themePath;
+    }
+    if (currentDashboardIsImported) {
+      await refreshInverseAnalysis();
+    } else {
+      hideInverseAnalysis();
     }
   } catch (err) {
     console.error("Failed to load dashboard:", err);
   }
 }
 
+// ---------------------------------------------------------------------------
+// Import analysis
+// ---------------------------------------------------------------------------
+
+function hideInverseAnalysis() {
+  const section = document.getElementById("dashboard-inverse-section");
+  const summaryEl = document.getElementById("inverse-summary");
+  const status = document.getElementById("inverse-status");
+  const applyBtn = document.getElementById("btn-inverse-apply-tokens");
+  section?.classList.add("hidden");
+  if (summaryEl) summaryEl.innerHTML = "";
+  if (status) status.textContent = "Analyzing theme...";
+  if (applyBtn) applyBtn.classList.add("hidden");
+}
+
+async function refreshInverseAnalysis() {
+  const section = document.getElementById("dashboard-inverse-section");
+  const status = document.getElementById("inverse-status");
+  const summaryEl = document.getElementById("inverse-summary");
+  const applyBtn = document.getElementById("btn-inverse-apply-tokens");
+  if (!section || !summaryEl) return;
+
+  const capturedSessionId = currentDashboardSessionId;
+
+  try {
+    const res = await fetch("/api/inverse/analyze");
+    if (currentDashboardSessionId !== capturedSessionId) return;
+    const data = await res.json();
+    if (!res.ok || data.error) {
+      section.classList.add("hidden");
+      return;
+    }
+    section.classList.remove("hidden");
+    renderInverseAnalysis(data.report);
+  } catch (err) {
+    console.warn("Import analysis failed:", err);
+    section.classList.add("hidden");
+  }
+}
+
+function renderInverseAnalysis(report) {
+  const status = document.getElementById("inverse-status");
+  const summaryEl = document.getElementById("inverse-summary");
+  const applyBtn = document.getElementById("btn-inverse-apply-tokens");
+  if (!report || !summaryEl) return;
+
+  const counts = report.summary || {};
+  const tokens = report.designTokens || {};
+  const findings = report.findings || [];
+  const warnings = findings.filter((f) => f.severity === "warning").length;
+  const errors = findings.filter((f) => f.severity === "error").length;
+  const hasInferredTokens = (tokens.palette || []).length > 0;
+  const hasCssVars = (counts.cssVarCount || 0) > 0;
+
+  if (status) {
+    if (errors > 0) status.textContent = `${errors} issue${errors === 1 ? "" : "s"} need attention`;
+    else if (warnings > 0) status.textContent = `${warnings} warning${warnings === 1 ? "" : "s"}`;
+    else status.textContent = "No blocking risks found";
+  }
+
+  if (applyBtn) {
+    applyBtn.classList.toggle("hidden", hasCssVars || !hasInferredTokens);
+    applyBtn.disabled = false;
+    applyBtn.textContent = "Apply Tokens";
+  }
+
+  const stats = [
+    ["Modules (disk)", counts.moduleCount || 0],
+    ["Templates (disk)", counts.templateCount || 0],
+    ["Orphans", counts.orphanCount || 0],
+    ["Palette", counts.paletteSize || 0],
+    ["CSS Vars", counts.cssVarCount || 0],
+    ["Macros", counts.customMacroCount || 0],
+  ];
+
+  let html = `<div class="inverse-summary__stats">`;
+  for (const [label, value] of stats) {
+    html += `
+      <div class="inverse-stat">
+        <span class="inverse-stat__value">${esc(String(value))}</span>
+        <span class="inverse-stat__label">${esc(label)}</span>
+      </div>
+    `;
+  }
+  html += `</div>`;
+
+  if ((tokens.palette || []).length > 0) {
+    html += `<div class="inverse-block"><div class="inverse-block__label">Palette</div><div class="inverse-swatches">`;
+    for (const color of tokens.palette.slice(0, 8)) {
+      const label = color.varName ? `${color.value} (${color.varName})` : color.value;
+      html += `<span class="inverse-swatch" style="background:${inverseCssColor(color.value)}" title="${inverseEscAttr(label)}"></span>`;
+    }
+    html += `</div></div>`;
+  }
+
+  if ((tokens.fontFamilies || []).length > 0) {
+    html += `<div class="inverse-block"><div class="inverse-block__label">Typography</div><div class="inverse-tags">`;
+    for (const font of tokens.fontFamilies.slice(0, 4)) {
+      html += `<span class="inverse-tag">${esc(font)}</span>`;
+    }
+    html += `</div></div>`;
+  }
+
+  html += renderInverseFindings(findings);
+  summaryEl.innerHTML = html;
+}
+
+function renderInverseFindings(findings) {
+  if (!findings || findings.length === 0) {
+    return `<div class="inverse-findings inverse-findings--empty">No findings. This imported theme looks straightforward to edit.</div>`;
+  }
+
+  const severityOrder = { error: 0, warning: 1, info: 2 };
+  const sorted = [...findings].sort((a, b) => (severityOrder[a.severity] ?? 2) - (severityOrder[b.severity] ?? 2));
+  const visible = sorted.slice(0, 5);
+  let html = `<div class="inverse-findings">`;
+  for (const finding of visible) {
+    const severity = ["error", "warning", "info"].includes(finding.severity) ? finding.severity : "info";
+    const fixAttr = finding.fix ? ` title="${inverseEscAttr(finding.fix)}"` : "";
+    html += `
+      <div class="inverse-finding inverse-finding--${severity}">
+        <span class="inverse-finding__severity">${esc(severity)}</span>
+        <span class="inverse-finding__message"${fixAttr}>${esc(finding.message)}</span>
+      </div>
+    `;
+  }
+  if (findings.length > visible.length) {
+    html += `<div class="inverse-findings__more">${findings.length - visible.length} more finding${findings.length - visible.length === 1 ? "" : "s"} available in the CLI report.</div>`;
+  }
+  html += `</div>`;
+  return html;
+}
+
+function inverseEscAttr(value) {
+  return esc(String(value)).replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
+function inverseCssColor(value) {
+  const color = String(value || "").trim();
+  if (/^#[0-9a-fA-F]{3,8}$/.test(color)) return color;
+  if (/^rgba?\([0-9.,%\s]+\)$/.test(color)) return color;
+  if (/^hsla?\([0-9.,%\sdegturnrad+-]+\)$/.test(color)) return color;
+  return "transparent";
+}
+
+document.getElementById("btn-inverse-apply-tokens")?.addEventListener("click", async () => {
+  const btn = document.getElementById("btn-inverse-apply-tokens");
+  if (!btn) return;
+
+  btn.disabled = true;
+  btn.textContent = "Applying...";
+  try {
+    const res = await fetch("/api/inverse/apply-tokens", { method: "POST" });
+    const data = await res.json();
+    if (!res.ok || data.error) {
+      await vibeAlert(data.error || "Failed to apply tokens.", "Error");
+      btn.disabled = false;
+      btn.textContent = "Apply Tokens";
+      return;
+    }
+    if (!data.applied) {
+      await vibeAlert(data.reason || "No tokens were applied.", "Info");
+    }
+    await refreshInverseAnalysis();
+  } catch (err) {
+    await vibeAlert("Failed to apply tokens: " + err.message, "Error");
+    btn.disabled = false;
+    btn.textContent = "Apply Tokens";
+  }
+});
+
 // ---------------------------------------------------------------------------
 // Template list
 // ---------------------------------------------------------------------------
@@ -94,7 +283,8 @@ async function refreshDashboard() {
 function renderTemplateList(templates) {
   const list = document.getElementById("dashboard-template-list");
   const countEl = document.getElementById("dashboard-template-count");
-  countEl.textContent = templates.length;
+  if (!list) return;
+  if (countEl) countEl.textContent = templates.length;
 
   if (templates.length === 0) {
     list.innerHTML = `<p class="dashboard__empty-state">No templates yet. Choose a page type above to get started.</p>`;
@@ -110,7 +300,7 @@ function renderTemplateList(templates) {
       <span class="dashboard__template-label">${esc(tpl.label)}</span>
       <span class="dashboard__template-meta">${tpl.moduleCount} module${tpl.moduleCount !== 1 ? "s" : ""}</span>
       <button class="btn btn--sm btn--primary dashboard__template-open" data-id="${esc(tpl.id)}">Open</button>
-      <button class="dashboard__template-clone" data-id="${esc(tpl.id)}" title="Clone template">&#x29C9;</button>
+      <button class="dashboard__template-clone" data-id="${esc(tpl.id)}" title="Clone template">${vsIcon("copy", {size: "sm"})}</button>
       <button class="dashboard__template-delete" data-id="${esc(tpl.id)}" title="Delete template">&times;</button>
     `;
     list.appendChild(item);
@@ -193,6 +383,70 @@ function startTemplateRename(labelEl, templateId) {
   });
 }
 
+// ---------------------------------------------------------------------------
+// Project assets (Library tab)
+// ---------------------------------------------------------------------------
+
+const ASSET_TYPE_LABELS = {
+  landing_page: "Landing Page",
+  blog_post: "Blog Post",
+  website_page: "Website Page",
+  module_only: "Module Only",
+  email: "Email",
+};
+
+function renderProjectAssets(templates) {
+  const container = document.getElementById("library-assets-list");
+  if (!container) return;
+
+  if (!templates || templates.length === 0) {
+    container.innerHTML = `<p class="dashboard__empty-state">Assets will appear here as you create pages and emails.</p>`;
+    return;
+  }
+
+  const pages = templates.filter((t) => t.pageType !== "email");
+  const emails = templates.filter((t) => t.pageType === "email");
+
+  let html = "";
+
+  if (pages.length > 0) {
+    html += `<div class="library-assets__group">`;
+    html += `<h3 class="library-assets__group-title">Pages <span class="library-assets__count">${pages.length}</span></h3>`;
+    for (const tpl of pages) {
+      html += renderAssetCard(tpl);
+    }
+    html += `</div>`;
+  }
+
+  if (emails.length > 0) {
+    html += `<div class="library-assets__group">`;
+    html += `<h3 class="library-assets__group-title">Emails <span class="library-assets__count">${emails.length}</span></h3>`;
+    for (const tpl of emails) {
+      html += renderAssetCard(tpl);
+    }
+    html += `</div>`;
+  }
+
+  container.innerHTML = html;
+
+  container.onclick = (e) => {
+    const card = e.target.closest(".library-asset-card");
+    if (!card) return;
+    const templateId = card.dataset.id;
+    if (templateId) openTemplate(templateId);
+  };
+}
+
+function renderAssetCard(tpl) {
+  const typeLabel = ASSET_TYPE_LABELS[tpl.pageType] || tpl.pageType;
+  return `
+    <div class="library-asset-card" data-id="${esc(tpl.id)}" role="button" tabindex="0">
+      <span class="dashboard__template-badge dashboard__template-badge--${esc(tpl.pageType)}">${esc(PAGE_TYPE_LABELS[tpl.pageType] || typeLabel)}</span>
+      <span class="library-asset-card__label">${esc(tpl.label)}</span>
+      <span class="library-asset-card__meta">${tpl.moduleCount} module${tpl.moduleCount !== 1 ? "s" : ""}</span>
+    </div>`;
+}
+
 // ---------------------------------------------------------------------------
 // Module library
 // ---------------------------------------------------------------------------
@@ -201,6 +455,7 @@ let activePreviewModule = "";
 
 function renderModuleLibrary(modules) {
   const container = document.getElementById("dashboard-module-library");
+  if (!container) return;
 
   if (modules.length === 0) {
     container.innerHTML = `<p class="dashboard__empty-state">Modules will appear here as you build pages.</p>`;
@@ -260,17 +515,17 @@ async function showModulePreview(moduleName, usedIn) {
 function closeModulePreview() {
   activePreviewModule = "";
   const previewEl = document.getElementById("dashboard-module-preview");
-  previewEl.classList.add("hidden");
+  if (previewEl) previewEl.classList.add("hidden");
   document.querySelectorAll(".dashboard__module-chip").forEach((c) => {
     c.classList.remove("dashboard__module-chip--active");
   });
 }
 
 // Close button for module preview
-document.getElementById("dashboard-preview-close").addEventListener("click", closeModulePreview);
+document.getElementById("dashboard-preview-close")?.addEventListener("click", closeModulePreview);
 
 // Delete button for module preview
-document.getElementById("dashboard-preview-delete").addEventListener("click", async () => {
+document.getElementById("dashboard-preview-delete")?.addEventListener("click", async () => {
   const moduleName = activePreviewModule;
   if (!moduleName) return;
 
@@ -377,9 +632,14 @@ async function extractBrandAsset(type, card) {
     });
     const data = await res.json();
     if (data.ok && data.content) {
+      if (data.brandKit) {
+        await loadFontList();
+        renderBrandKit(data.brandKit);
+      }
       await refreshDashboard();
+      const msg = data.brandKit ? `${ASSET_LABELS[type]} extracted. Brand kit updated from styleguide.` : `${ASSET_LABELS[type]} extracted.`;
       const view = await vibeConfirm(
-        `${ASSET_LABELS[type]} extracted.`,
+        msg,
         "Would you like to view it?",
         { confirmLabel: "View", confirmClass: "btn--primary" },
       );
@@ -416,6 +676,220 @@ document.getElementById("dashboard-brand-assets")?.addEventListener("change", (e
   handleBrandFileSelected(card.dataset.asset, e.target.files[0]);
 });
 
+// ---------------------------------------------------------------------------
+// Brand kit
+// ---------------------------------------------------------------------------
+
+let _fontList = [];
+
+async function loadFontList() {
+  if (_fontList.length > 0) return;
+  try {
+    const res = await fetch("/api/fonts");
+    _fontList = await res.json();
+  } catch { _fontList = []; }
+  populateFontSelects();
+}
+
+function populateFontSelects() {
+  for (const id of ["bk-font-heading", "bk-font-body"]) {
+    const sel = document.getElementById(id);
+    if (!sel || sel.options.length > 1) continue;
+
+    const categories = ["system", "sans-serif", "serif", "display", "monospace"];
+    const catLabels = { system: "System", "sans-serif": "Sans-Serif", serif: "Serif", display: "Display", monospace: "Monospace" };
+    for (const cat of categories) {
+      const group = document.createElement("optgroup");
+      group.label = catLabels[cat] || cat;
+      for (const f of _fontList.filter((x) => x.category === cat)) {
+        const opt = document.createElement("option");
+        opt.value = f.stack;
+        opt.textContent = f.name;
+        opt.style.fontFamily = f.stack;
+        group.appendChild(opt);
+      }
+      sel.appendChild(group);
+    }
+  }
+}
+
+function renderBrandKit(brandKit) {
+  const fields = {
+    primary: { color: "bk-color-primary", hex: "bk-hex-primary" },
+    secondary: { color: "bk-color-secondary", hex: "bk-hex-secondary" },
+    accent: { color: "bk-color-accent", hex: "bk-hex-accent" },
+  };
+
+  for (const [key, ids] of Object.entries(fields)) {
+    const colorInput = document.getElementById(ids.color);
+    const hexInput = document.getElementById(ids.hex);
+    const val = brandKit?.colors?.[key] || "";
+    if (colorInput) colorInput.value = val || colorInput.value;
+    if (hexInput) hexInput.value = val;
+  }
+
+  const headingSelect = document.getElementById("bk-font-heading");
+  const bodySelect = document.getElementById("bk-font-body");
+  const logoInput = document.getElementById("bk-logo-url");
+
+  if (headingSelect) selectFontValue(headingSelect, brandKit?.fonts?.heading || "");
+  if (bodySelect) selectFontValue(bodySelect, brandKit?.fonts?.body || "");
+  if (logoInput) logoInput.value = brandKit?.logoUrl || "";
+
+  updateBrandPreview();
+}
+
+function selectFontValue(selectEl, value) {
+  if (!value) { selectEl.value = ""; return; }
+  const lower = value.toLowerCase().trim();
+  for (const opt of selectEl.options) {
+    if (opt.value.toLowerCase().trim() === lower) {
+      selectEl.value = opt.value;
+      return;
+    }
+  }
+  const custom = document.createElement("option");
+  custom.value = value;
+  custom.textContent = value.split(",")[0].replace(/['"]/g, "").trim() + " (custom)";
+  const firstOptgroup = selectEl.querySelector("optgroup");
+  selectEl.insertBefore(custom, firstOptgroup || selectEl.options[1]);
+  selectEl.value = value;
+}
+
+function updateBrandPreview() {
+  const hexRe = /^#[0-9a-fA-F]{6}$/;
+  const swatchKeys = ["primary", "secondary", "accent"];
+  for (const key of swatchKeys) {
+    const swatch = document.getElementById(`brand-preview-swatch-${key}`);
+    const hex = document.getElementById(`bk-hex-${key}`)?.value?.trim();
+    if (!swatch) continue;
+    if (hex && hexRe.test(hex)) {
+      swatch.style.background = hex;
+      swatch.dataset.empty = "false";
+      swatch.title = `${key.charAt(0).toUpperCase() + key.slice(1)} ${hex}`;
+    } else {
+      swatch.style.background = "";
+      swatch.dataset.empty = "true";
+      swatch.title = `${key.charAt(0).toUpperCase() + key.slice(1)} (not set)`;
+    }
+  }
+
+  const headingFont = document.getElementById("bk-font-heading")?.value || "";
+  const bodyFont = document.getElementById("bk-font-body")?.value || "";
+  const headingPreview = document.getElementById("brand-preview-heading");
+  const bodyPreview = document.getElementById("brand-preview-body");
+  if (headingPreview) headingPreview.style.fontFamily = headingFont || "Georgia, serif";
+  if (bodyPreview) bodyPreview.style.fontFamily = bodyFont || "Arial, Helvetica, sans-serif";
+
+  const logoUrl = document.getElementById("bk-logo-url")?.value?.trim();
+  const logoImg = document.getElementById("brand-preview-logo");
+  const logoPlaceholder = document.getElementById("brand-preview-logo-placeholder");
+  if (logoImg && logoPlaceholder) {
+    if (logoUrl) {
+      logoImg.src = logoUrl;
+      logoImg.hidden = false;
+      logoPlaceholder.hidden = true;
+      logoImg.onerror = () => {
+        logoImg.hidden = true;
+        logoPlaceholder.hidden = false;
+        logoPlaceholder.textContent = "Bad URL";
+      };
+      logoImg.onload = () => {
+        logoPlaceholder.textContent = "No logo";
+      };
+    } else {
+      logoImg.hidden = true;
+      logoImg.removeAttribute("src");
+      logoPlaceholder.hidden = false;
+      logoPlaceholder.textContent = "No logo";
+    }
+  }
+}
+
+for (const id of [
+  "bk-hex-primary", "bk-hex-secondary", "bk-hex-accent",
+  "bk-color-primary", "bk-color-secondary", "bk-color-accent",
+  "bk-logo-url",
+]) {
+  document.getElementById(id)?.addEventListener("input", updateBrandPreview);
+}
+for (const id of ["bk-font-heading", "bk-font-body"]) {
+  document.getElementById(id)?.addEventListener("change", updateBrandPreview);
+}
+
+document.addEventListener("DOMContentLoaded", () => { loadFontList(); updateBrandPreview(); });
+
+function collectBrandKit() {
+  const kit = {};
+  const primary = document.getElementById("bk-hex-primary")?.value?.trim();
+  const secondary = document.getElementById("bk-hex-secondary")?.value?.trim();
+  const accent = document.getElementById("bk-hex-accent")?.value?.trim();
+  const hexRe = /^#[0-9a-fA-F]{6}$/;
+  const colors = {};
+  if (primary && hexRe.test(primary)) colors.primary = primary;
+  if (secondary && hexRe.test(secondary)) colors.secondary = secondary;
+  if (accent && hexRe.test(accent)) colors.accent = accent;
+  if (Object.keys(colors).length > 0) kit.colors = colors;
+
+  const heading = document.getElementById("bk-font-heading")?.value || "";
+  const body = document.getElementById("bk-font-body")?.value || "";
+  const fonts = {};
+  if (heading) fonts.heading = heading;
+  if (body) fonts.body = body;
+  if (Object.keys(fonts).length > 0) kit.fonts = fonts;
+
+  const logo = document.getElementById("bk-logo-url")?.value?.trim();
+  if (logo) kit.logoUrl = logo;
+
+  return kit;
+}
+
+// Sync color picker ↔ hex input
+for (const key of ["primary", "secondary", "accent"]) {
+  const colorInput = document.getElementById(`bk-color-${key}`);
+  const hexInput = document.getElementById(`bk-hex-${key}`);
+  if (colorInput && hexInput) {
+    colorInput.addEventListener("input", () => { hexInput.value = colorInput.value; });
+    hexInput.addEventListener("input", () => {
+      if (/^#[0-9a-fA-F]{6}$/.test(hexInput.value)) colorInput.value = hexInput.value;
+    });
+  }
+}
+
+document.getElementById("bk-save")?.addEventListener("click", async () => {
+  const kit = collectBrandKit();
+  if (Object.keys(kit).length === 0) {
+    await vibeAlert("Please fill in at least one field.", "Info");
+    return;
+  }
+  try {
+    const res = await fetch("/api/brand-kit", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(kit),
+    });
+    const data = await res.json();
+    if (data.ok) {
+      await vibeAlert("Brand kit saved.", "Success");
+    } else {
+      await vibeAlert(data.error || "Failed to save brand kit.", "Error");
+    }
+  } catch (err) {
+    await vibeAlert("Failed to save: " + err.message, "Error");
+  }
+});
+
+document.getElementById("bk-clear")?.addEventListener("click", async () => {
+  const ok = await vibeConfirm("Clear brand kit?", "This will remove all brand kit settings.", { confirmLabel: "Clear", confirmClass: "btn--danger" });
+  if (!ok) return;
+  try {
+    await fetch("/api/brand-kit", { method: "DELETE" });
+    renderBrandKit(null);
+  } catch (err) {
+    await vibeAlert("Failed to clear: " + err.message, "Error");
+  }
+});
+
 // ---------------------------------------------------------------------------
 // Actions
 // ---------------------------------------------------------------------------
@@ -426,6 +900,7 @@ async function createTemplateFromPageType(pageType) {
     blog_post: "Blog Post",
     website_page: "Website Page",
     module_only: "Module",
+    email: "Email",
   };
 
   const label = await vibePrompt("Template name", defaultLabels[pageType] || "New Template");
@@ -443,8 +918,12 @@ async function createTemplateFromPageType(pageType) {
       return;
     }
 
-    // Open the newly created template in chat
-    openTemplate(data.template.id);
+    // Navigate to the editor with the new asset selected
+    await openTemplate(data.template.id);
+
+    // Focus the chat input so the user can start describing their page
+    const chatInput = document.getElementById("chat-input");
+    if (chatInput) setTimeout(() => chatInput.focus(), 100);
   } catch (err) {
     await vibeAlert("Failed to create template: " + err.message, "Error");
   }
@@ -561,6 +1040,10 @@ async function handleBrandFileSelected(type, file) {
       await vibeAlert(data.error, "Error");
       return;
     }
+    if (data.brandKit) {
+      await loadFontList();
+      renderBrandKit(data.brandKit);
+    }
     refreshDashboard();
   } catch (err) {
     await vibeAlert("Failed to upload: " + err.message, "Error");
@@ -572,22 +1055,19 @@ async function handleBrandFileSelected(type, file) {
 // ---------------------------------------------------------------------------
 
 function showChat(themeName, templateId) {
-  hideDashboard();
-
-  // Show app screen
-  appScreen.classList.remove("hidden");
+  const ab = document.getElementById("app-body");
+  if (ab) ab.dataset.mode = "editor";
+  dashboardScreen.classList.remove("hidden");
   document.getElementById("theme-name").textContent = themeName;
 
-  // Update browser chrome URL bar
-  const urlEl = document.getElementById("browser-url");
-  if (urlEl) urlEl.textContent = themeName + ".vibespot.app";
-
   // Update URL
   const target = `#/app/${encodeURIComponent(themeName)}/${encodeURIComponent(templateId)}`;
   if (location.hash !== target) {
     history.pushState(null, "", target);
   }
 
+  switchWorkspaceTab("pages");
+
   // Connect WebSocket (defined in chat.js)
   if (typeof connectWebSocket === "function") {
     connectWebSocket();
@@ -597,6 +1077,8 @@ function showChat(themeName, templateId) {
   if (typeof refreshPreview === "function") {
     refreshPreview();
   }
+
+  setTimeout(() => document.getElementById("chat-input")?.focus(), 100);
 }
 
 // ---------------------------------------------------------------------------
@@ -610,26 +1092,11 @@ document.querySelectorAll(".page-type-card").forEach((card) => {
   });
 });
 
-// Back button → setup
-document.getElementById("dashboard-back").addEventListener("click", () => {
-  hideDashboard();
-  if (typeof showSetup === "function") showSetup();
-});
-
-// Settings button
-document.getElementById("dashboard-settings-btn").addEventListener("click", () => {
-  if (typeof openSettings === "function") openSettings();
-});
+// Deploy button — handled by chat.js (single listener to avoid duplicate overlays)
 
-// Deploy button
-document.getElementById("dashboard-deploy-btn").addEventListener("click", () => {
-  if (typeof startUpload === "function") {
-    // Need to show app screen temporarily for upload
-    appScreen.classList.remove("hidden");
-    dashboardScreen.classList.add("hidden");
-    startUpload();
-  }
-});
+// Library tab — add page / add email
+document.getElementById("library-add-page")?.addEventListener("click", () => createTemplateFromPageType("landing_page"));
+document.getElementById("library-add-email")?.addEventListener("click", () => createTemplateFromPageType("email"));
 
 // Extract All button
 document.getElementById("btn-extract-all")?.addEventListener("click", async () => {
@@ -658,13 +1125,18 @@ document.getElementById("btn-extract-all")?.addEventListener("click", async () =
     });
     const data = await res.json();
     if (data.ok) {
+      if (data.brandKit) {
+        await loadFontList();
+        renderBrandKit(data.brandKit);
+      }
       await refreshDashboard();
       const extracted = data.extracted || {};
       const names = Object.entries(extracted)
         .filter(([, v]) => v)
         .map(([k]) => ASSET_LABELS[k] || k);
       if (names.length > 0) {
-        await vibeAlert(`Extracted: ${names.join(", ")}`, "Done");
+        const suffix = data.brandKit ? " Brand kit updated from styleguide." : "";
+        await vibeAlert(`Extracted: ${names.join(", ")}.${suffix}`, "Done");
       } else {
         await vibeAlert("Nothing to extract \u2014 generate some modules first.", "Info");
       }
@@ -728,9 +1200,9 @@ document.getElementById("btn-import-reference")?.addEventListener("click", async
   }
 });
 
-// Dashboard theme heading — double-click to rename
-document.getElementById("dashboard-theme-heading")?.addEventListener("dblclick", () => {
-  const el = document.getElementById("dashboard-theme-heading");
+// Theme name pill — double-click to rename
+document.getElementById("theme-name")?.addEventListener("dblclick", () => {
+  const el = document.getElementById("theme-name");
   if (!el || !currentDashboardSessionId) return;
   if (el.contentEditable === "true") return;
 
@@ -765,7 +1237,7 @@ document.getElementById("dashboard-theme-heading")?.addEventListener("dblclick",
         if (data.ok) {
           el.textContent = data.newName;
           currentDashboardTheme = data.newName;
-          document.getElementById("dashboard-theme-name").textContent = data.newName;
+          document.getElementById("theme-name").textContent = data.newName;
           window.location.hash = "#/dashboard/" + encodeURIComponent(data.newName);
           // Update rail
           const railItem = document.querySelector(`.project-rail__item[data-name="${oldName}"]`);
@@ -803,36 +1275,6 @@ document.getElementById("dashboard-theme-heading")?.addEventListener("dblclick",
   });
 });
 
-// Download ZIP button
-document.getElementById("dashboard-download-zip").addEventListener("click", async () => {
-  const btn = document.getElementById("dashboard-download-zip");
-  const origHTML = btn.innerHTML;
-  btn.disabled = true;
-  btn.querySelector("span").textContent = "Downloading...";
-
-  try {
-    const res = await fetch("/api/download-zip");
-    if (!res.ok) {
-      const err = await res.json().catch(() => ({ error: "Download failed" }));
-      throw new Error(err.error || "Download failed");
-    }
-    const blob = await res.blob();
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = (currentDashboardTheme || "theme") + ".zip";
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    URL.revokeObjectURL(url);
-  } catch (err) {
-    if (typeof vibeAlert === "function") vibeAlert(err.message, "Error");
-  } finally {
-    btn.disabled = false;
-    btn.innerHTML = origHTML;
-  }
-});
-
 // Humanify toggle
 const humanifyCheckbox = document.getElementById("humanify-checkbox");
 if (humanifyCheckbox) {
@@ -844,3 +1286,29 @@ if (humanifyCheckbox) {
     });
   });
 }
+
+// ---------------------------------------------------------------------------
+// Workspace tab navigation
+// ---------------------------------------------------------------------------
+
+function switchWorkspaceTab(tabName) {
+  document.querySelectorAll(".workspace-tab").forEach((btn) => {
+    btn.classList.toggle("active", btn.dataset.wsTab === tabName);
+  });
+  document.querySelectorAll(".workspace-panel").forEach((panel) => {
+    panel.classList.toggle("active", panel.dataset.wsPanel === tabName);
+  });
+  if (tabName === "settings" && typeof refreshSettings === "function") {
+    refreshSettings();
+  }
+  if (tabName === "library") {
+    refreshDashboard();
+  }
+}
+
+document.querySelectorAll(".workspace-tab").forEach((btn) => {
+  btn.addEventListener("click", () => {
+    switchWorkspaceTab(btn.dataset.wsTab);
+  });
+});
+