vibespot 1.2.0 → 1.3.0

package/ui/dashboard.js

@@ -3,21 +3,21 @@
  * 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 = {
   landing_page: "LP",
   blog_post: "Blog",
   website_page: "Web",
-  module_only: "Sec",
+  module_only: "Mod",
 };
 
 const PAGE_TYPE_FULL_LABELS = {
   landing_page: "Landing Page",
   blog_post: "Blog Post",
   website_page: "Website Page",
-  module_only: "Section Only",
+  module_only: "Module Only",
 };
 
 // ---------------------------------------------------------------------------
@@ -31,16 +31,13 @@ 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 {
@@ -61,10 +58,16 @@ 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();
@@ -83,10 +86,14 @@ 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();
@@ -276,7 +283,8 @@ document.getElementById("btn-inverse-apply-tokens")?.addEventListener("click", a
 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>`;
@@ -290,9 +298,9 @@ function renderTemplateList(templates) {
     item.innerHTML = `
       <span class="dashboard__template-badge dashboard__template-badge--${tpl.pageType}">${esc(PAGE_TYPE_LABELS[tpl.pageType] || "?")}</span>
       <span class="dashboard__template-label">${esc(tpl.label)}</span>
-      <span class="dashboard__template-meta">${tpl.moduleCount} section${tpl.moduleCount !== 1 ? "s" : ""}</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);
@@ -375,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
 // ---------------------------------------------------------------------------
@@ -383,9 +455,10 @@ 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">Sections will appear here as you build pages.</p>`;
+    container.innerHTML = `<p class="dashboard__empty-state">Modules will appear here as you build pages.</p>`;
     closeModulePreview();
     return;
   }
@@ -442,22 +515,22 @@ 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;
 
   const ok = await vibeConfirm(
-    `Delete section "${moduleName}"?`,
+    `Delete module "${moduleName}"?`,
     "This will remove it from all templates and delete it from disk.",
     { confirmLabel: "Delete" }
   );
@@ -472,7 +545,7 @@ document.getElementById("dashboard-preview-delete").addEventListener("click", as
     closeModulePreview();
     await refreshDashboard();
   } catch (err) {
-    await vibeAlert("Failed to delete section: " + err.message, "Error");
+    await vibeAlert("Failed to delete module: " + err.message, "Error");
   }
 });
 
@@ -559,15 +632,20 @@ 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" },
       );
       if (view) await vibeViewContent(data.content, ASSET_LABELS[type], ASSET_FILES[type]);
     } else {
-      await vibeAlert(data.error || "Nothing to extract — generate some sections first.", "Info");
+      await vibeAlert(data.error || "Nothing to extract — generate some modules first.", "Info");
     }
   } catch (err) {
     await vibeAlert("Extraction failed: " + err.message, "Error");
@@ -598,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
 // ---------------------------------------------------------------------------
@@ -607,7 +899,8 @@ async function createTemplateFromPageType(pageType) {
     landing_page: "Landing Page",
     blog_post: "Blog Post",
     website_page: "Website Page",
-    module_only: "Section",
+    module_only: "Module",
+    email: "Email",
   };
 
   const label = await vibePrompt("Template name", defaultLabels[pageType] || "New Template");
@@ -625,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");
   }
@@ -684,8 +981,8 @@ function vibeDeleteTemplateDialog() {
         <div class="confirm-dialog__title">Delete template?</div>
         <p class="confirm-dialog__warn">This cannot be undone.</p>
         <div class="confirm-dialog__actions" style="flex-direction:column;gap:8px">
-          <button class="btn btn--danger" data-action="with_modules" style="width:100%">Delete template and its sections</button>
-          <button class="btn btn--secondary" data-action="template_only" style="width:100%">Delete template only (keep sections)</button>
+          <button class="btn btn--danger" data-action="with_modules" style="width:100%">Delete template and its modules</button>
+          <button class="btn btn--secondary" data-action="template_only" style="width:100%">Delete template only (keep modules)</button>
           <button class="btn btn--secondary" data-action="cancel" style="width:100%">Cancel</button>
         </div>
       </div>
@@ -743,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");
@@ -754,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();
@@ -779,6 +1077,8 @@ function showChat(themeName, templateId) {
   if (typeof refreshPreview === "function") {
     refreshPreview();
   }
+
+  setTimeout(() => document.getElementById("chat-input")?.focus(), 100);
 }
 
 // ---------------------------------------------------------------------------
@@ -792,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();
-});
+// Deploy button — handled by chat.js (single listener to avoid duplicate overlays)
 
-// Settings button
-document.getElementById("dashboard-settings-btn").addEventListener("click", () => {
-  if (typeof openSettings === "function") openSettings();
-});
-
-// 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 () => {
@@ -840,15 +1125,20 @@ 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 sections first.", "Info");
+        await vibeAlert("Nothing to extract \u2014 generate some modules first.", "Info");
       }
     } else {
       await vibeAlert(data.error || "Extraction failed", "Error");
@@ -910,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;
 
@@ -947,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}"]`);
@@ -985,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) {
@@ -1026,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);
+  });
+});
+