vibespot 1.1.0 → 1.2.0

package/ui/dashboard.js

@@ -10,14 +10,14 @@ const PAGE_TYPE_LABELS = {
   landing_page: "LP",
   blog_post: "Blog",
   website_page: "Web",
-  module_only: "Mod",
+  module_only: "Sec",
 };
 
 const PAGE_TYPE_FULL_LABELS = {
   landing_page: "Landing Page",
   blog_post: "Blog Post",
   website_page: "Website Page",
-  module_only: "Module Only",
+  module_only: "Section Only",
 };
 
 // ---------------------------------------------------------------------------
@@ -26,6 +26,7 @@ const PAGE_TYPE_FULL_LABELS = {
 
 let currentDashboardTheme = "";
 let currentDashboardSessionId = "";
+let currentDashboardIsImported = false;
 
 async function showDashboard(themeName) {
   currentDashboardTheme = themeName;
@@ -46,7 +47,11 @@ async function showDashboard(themeName) {
     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);
@@ -61,6 +66,7 @@ async function showDashboard(themeName) {
 function hideDashboard() {
   dashboardScreen.classList.add("hidden");
   currentDashboardTheme = "";
+  currentDashboardIsImported = false;
   closeModulePreview();
 }
 
@@ -82,11 +88,187 @@ async function refreshDashboard() {
     if (data.themePath) {
       document.getElementById("dashboard-theme-path-text").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
 // ---------------------------------------------------------------------------
@@ -108,7 +290,7 @@ 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} module${tpl.moduleCount !== 1 ? "s" : ""}</span>
+      <span class="dashboard__template-meta">${tpl.moduleCount} section${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-delete" data-id="${esc(tpl.id)}" title="Delete template">&times;</button>
@@ -203,7 +385,7 @@ function renderModuleLibrary(modules) {
   const container = document.getElementById("dashboard-module-library");
 
   if (modules.length === 0) {
-    container.innerHTML = `<p class="dashboard__empty-state">Modules will appear here as you build pages.</p>`;
+    container.innerHTML = `<p class="dashboard__empty-state">Sections will appear here as you build pages.</p>`;
     closeModulePreview();
     return;
   }
@@ -275,7 +457,7 @@ document.getElementById("dashboard-preview-delete").addEventListener("click", as
   if (!moduleName) return;
 
   const ok = await vibeConfirm(
-    `Delete module "${moduleName}"?`,
+    `Delete section "${moduleName}"?`,
     "This will remove it from all templates and delete it from disk.",
     { confirmLabel: "Delete" }
   );
@@ -290,7 +472,7 @@ document.getElementById("dashboard-preview-delete").addEventListener("click", as
     closeModulePreview();
     await refreshDashboard();
   } catch (err) {
-    await vibeAlert("Failed to delete module: " + err.message, "Error");
+    await vibeAlert("Failed to delete section: " + err.message, "Error");
   }
 });
 
@@ -385,7 +567,7 @@ async function extractBrandAsset(type, card) {
       );
       if (view) await vibeViewContent(data.content, ASSET_LABELS[type], ASSET_FILES[type]);
     } else {
-      await vibeAlert(data.error || "Nothing to extract — generate some modules first.", "Info");
+      await vibeAlert(data.error || "Nothing to extract — generate some sections first.", "Info");
     }
   } catch (err) {
     await vibeAlert("Extraction failed: " + err.message, "Error");
@@ -425,7 +607,7 @@ async function createTemplateFromPageType(pageType) {
     landing_page: "Landing Page",
     blog_post: "Blog Post",
     website_page: "Website Page",
-    module_only: "Module",
+    module_only: "Section",
   };
 
   const label = await vibePrompt("Template name", defaultLabels[pageType] || "New Template");
@@ -502,8 +684,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 modules</button>
-          <button class="btn btn--secondary" data-action="template_only" style="width:100%">Delete template only (keep modules)</button>
+          <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--secondary" data-action="cancel" style="width:100%">Cancel</button>
         </div>
       </div>
@@ -666,7 +848,7 @@ document.getElementById("btn-extract-all")?.addEventListener("click", async () =
       if (names.length > 0) {
         await vibeAlert(`Extracted: ${names.join(", ")}`, "Done");
       } else {
-        await vibeAlert("Nothing to extract \u2014 generate some modules first.", "Info");
+        await vibeAlert("Nothing to extract \u2014 generate some sections first.", "Info");
       }
     } else {
       await vibeAlert(data.error || "Extraction failed", "Error");

package/ui/docs/index.html

@@ -21,7 +21,7 @@
   </a>
   <div class="doc-topbar__search">
     <span class="doc-topbar__search-icon">&#128269;</span>
-    <input type="text" id="doc-search-input" placeholder="Search docs..." autocomplete="off">
+    <input type="text" id="doc-search-input" placeholder="Search docs..." autocomplete="off" aria-label="Search documentation">
     <span class="doc-topbar__shortcut">/</span>
   </div>
   <a href="/" class="doc-topbar__back">&larr; Back to App</a>
@@ -97,6 +97,8 @@
     <a class="doc-nav__link" href="#deploying">Deploying to HubSpot</a>
     <a class="doc-nav__link doc-nav__link--sub" href="#auto-fix">Auto-Fix</a>
     <a class="doc-nav__link doc-nav__link--sub" href="#creating-page-hubspot">Creating a Page</a>
+    <a class="doc-nav__link" href="#zip-download">ZIP Download</a>
+    <a class="doc-nav__link" href="#marketplace">Marketplace</a>
     <a class="doc-nav__link" href="#version-history">Version History</a>
   </div>
 
@@ -105,6 +107,7 @@
     <a class="doc-nav__link" href="#settings">Settings</a>
     <a class="doc-nav__link doc-nav__link--sub" href="#settings-ai">AI Tab</a>
     <a class="doc-nav__link doc-nav__link--sub" href="#settings-hubspot">HubSpot Tab</a>
+    <a class="doc-nav__link doc-nav__link--sub" href="#settings-figma">Figma Tab</a>
     <a class="doc-nav__link" href="#cli-commands">CLI Commands</a>
     <a class="doc-nav__link" href="#shortcuts">Shortcuts</a>
     <a class="doc-nav__link" href="#troubleshooting">Troubleshooting</a>
@@ -205,7 +208,7 @@ vibespot</code></pre>
       <tr><td>Claude Code</td><td>CLI</td><td>Install <code>claude</code> CLI, authenticate</td><td>Included in Claude subscription</td><td>Subscribers who want zero API costs</td></tr>
       <tr><td>Anthropic API</td><td>API</td><td>Add <code>ANTHROPIC_API_KEY</code></td><td>Pay-per-token</td><td>Fastest structured output, reliable</td></tr>
       <tr><td>Claude OAuth</td><td>API</td><td>Run <code>claude setup-token</code>, paste token</td><td>Included in Claude subscription</td><td>Subscribers without API budget</td></tr>
-      <tr><td>OpenAI API</td><td>API</td><td>Add <code>OPENAI_API_KEY</code></td><td>Pay-per-token</td><td>GPT-4o users, existing OpenAI budget</td></tr>
+      <tr><td>OpenAI API</td><td>API</td><td>Add <code>OPENAI_API_KEY</code></td><td>Pay-per-token</td><td>GPT-5.5 users, existing OpenAI budget</td></tr>
       <tr><td>Gemini API</td><td>API</td><td>Add <code>GEMINI_API_KEY</code></td><td>Free tier available</td><td>Cost-conscious users, free quota</td></tr>
       <tr><td>Gemini CLI</td><td>CLI</td><td>Install <code>gemini</code> CLI, authenticate</td><td>Free (with Google account)</td><td>Free option without API keys</td></tr>
       <tr><td>Codex CLI</td><td>CLI</td><td>Install <code>codex</code> CLI, authenticate</td><td>Included in OpenAI subscription</td><td>OpenAI subscribers</td></tr>
@@ -251,7 +254,7 @@ vibespot</code></pre>
       </div>
     </div>
     <div class="doc-tabs__panel" id="tab-openai">
-      <p>Use OpenAI's GPT-4o or any compatible model through the OpenAI API.</p>
+      <p>Use OpenAI's GPT-5.5 or any compatible model through the OpenAI API.</p>
       <ol class="doc-steps">
         <li>Get an API key from <a href="https://platform.openai.com/api-keys" target="_blank">platform.openai.com</a>.</li>
         <li>Paste the key in Settings &rarr; AI tab &rarr; OpenAI API Key, or set <code>export OPENAI_API_KEY=sk-...</code></li>
@@ -313,7 +316,7 @@ vibespot</code></pre>
       <tr><td><code>geminiApiKey</code></td><td>string</td><td>Google AI / Gemini API key</td></tr>
       <tr><td><code>claudeCodeModel</code></td><td>string</td><td>Model override for Claude Code CLI</td></tr>
       <tr><td><code>anthropicApiModel</code></td><td>string</td><td>Anthropic API model (default: <code>claude-sonnet-4-20250514</code>)</td></tr>
-      <tr><td><code>openaiApiModel</code></td><td>string</td><td>OpenAI API model (default: <code>gpt-4o</code>)</td></tr>
+      <tr><td><code>openaiApiModel</code></td><td>string</td><td>OpenAI API model (default: <code>gpt-5.5</code>)</td></tr>
       <tr><td><code>hubspotAccounts</code></td><td>array</td><td>List of HubSpot accounts with PAK, portal ID, and data center</td></tr>
       <tr><td><code>activeHubSpotAccount</code></td><td>string</td><td>Portal ID of the currently active HubSpot account</td></tr>
       <tr><td><code>hubspotUploadMode</code></td><td>string</td><td><code>"api"</code> (default) or <code>"cli"</code></td></tr>
@@ -424,7 +427,7 @@ vibespot</code></pre>
       <div class="mock-editor__resize" title="Drag to resize panels"></div>
       <div class="mock-editor__right">
         <div class="mock-preview">
-          <div class="mock-preview__tabs"><span class="mock-preview__tab active">Preview</span><span class="mock-preview__tab">Code</span></div>
+          <div class="mock-preview__tabs"><span class="mock-preview__tab active">Preview</span><span class="mock-preview__tab">Plan</span><span class="mock-preview__tab">Code</span></div>
           <div class="mock-preview__chrome">
             <div class="mock-preview__dots"><span class="mock-preview__dot"></span><span class="mock-preview__dot"></span><span class="mock-preview__dot"></span></div>
             <div class="mock-preview__url">my-startup.vibespot.app</div>
@@ -500,7 +503,7 @@ vibespot</code></pre>
     <li><code>fields.json</code> &mdash; Field definitions for the HubSpot content editor</li>
   </ul>
   <p>At the theme level, you also have access to <code>shared.css</code> (design system utilities) and <code>shared.js</code> (scroll animations, shared behaviors).</p>
-  <p>The editor uses CodeMirror 6 with syntax highlighting for HTML, CSS, JavaScript, and JSON. Save your changes with <kbd>Cmd</kbd>+<kbd>S</kbd> (or <kbd>Ctrl</kbd>+<kbd>S</kbd> on Windows/Linux) to write to disk and refresh the preview.</p>
+  <p>The editor uses CodeMirror 6 with syntax highlighting for HTML, CSS, JavaScript, and JSON. Save your changes with <kbd>Cmd</kbd>+<kbd>S</kbd> (or <kbd>Ctrl</kbd>+<kbd>S</kbd> on Windows/Linux) or click the <strong>Save</strong> button to write to disk and refresh the preview.</p>
 
   <h3 id="module-sidebar">Module Sidebar</h3>
   <p>The module sidebar is a <strong>toggleable slideout</strong> panel. Click the <strong>Modules</strong> button (grid icon + count badge) at the top of the left panel to open it. The slideout slides in from the left over the chat area. Click the <strong>&times;</strong> button or the Modules button again to close it.</p>
@@ -760,6 +763,9 @@ vibespot</code></pre>
     <li><strong>Refine.</strong> Subsequent messages tweak the plan. "Move the FAQ above the pricing." "Change the primary CTA to 'Book a demo'." The AI confirms what changed in chat and updates the plan in the pane. It only asks clarifying questions when your edit creates a new ambiguity.</li>
   </ol>
 
+  <h4>Plan-mode templates (skip Understand)</h4>
+  <p>For common page types, the cold-start <em>Understand</em> phase is unnecessary. When the Plan pane is empty, vibeSpot shows a picker of pre-canned templates &mdash; SaaS landing, e-commerce product, event registration, blog/content hub, portfolio, agency/services, restaurant. Picking one seeds <code>.vibespot/plan.md</code> with goal, audience, primary CTA, suggested kebab-case modules, brand/tone, and a tailored "Open questions" list. The next AI turn skips straight to those page-specific questions instead of asking generic ones. Pick <strong>Blank plan</strong> to keep the original free-form behavior.</p>
+
   <h3 id="plan-mode-pane">The Plan Pane &amp; Inline Editing</h3>
   <p>The <strong>Plan</strong> tab in the right pane (between Preview and Code) is the source of truth for the current plan. While plan mode is on, this tab auto-selects when you send a message so the latest plan is always visible.</p>
   <p>Two modes inside the pane:</p>
@@ -990,6 +996,60 @@ vibespot</code></pre>
   </ul>
 </div>
 
+<!-- ============================================================
+     Section: ZIP Download
+     ============================================================ -->
+<div class="doc-section" id="zip-download">
+  <h2 id="zip-download-heading">ZIP Download <a href="#zip-download" class="doc-anchor">#</a></h2>
+  <p>Export your theme as a ZIP archive for offline use, sharing, or manual upload to HubSpot.</p>
+  <p>Click the <strong>Download ZIP</strong> button on the dashboard toolbar (next to the theme name) to generate and download a <code>.zip</code> file containing all theme files: modules, templates, shared CSS/JS, and assets. The ZIP file is named after the theme (e.g., <code>my-saas-landing.zip</code>).</p>
+  <div class="doc-callout doc-callout--tip">
+    <div class="doc-callout__label">&#10024; When to use ZIP download</div>
+    <p>ZIP download is useful when you want to share the theme with a colleague who does not have vibeSpot, back up the theme independently of git, or upload manually through HubSpot's Design Manager.</p>
+  </div>
+</div>
+
+<!-- ============================================================
+     Section: HubSpot Marketplace publication path
+     ============================================================ -->
+<div class="doc-section" id="marketplace">
+  <h2 id="marketplace-heading">HubSpot Marketplace <a href="#marketplace" class="doc-anchor">#</a></h2>
+  <p>The HubSpot Marketplace has stricter requirements than a private theme upload. vibeSpot ships a Marketplace publication path that audits a generated theme and helps you collect the listing metadata you'll paste into HubSpot's submission form.</p>
+
+  <h3 id="marketplace-button">Where to find it</h3>
+  <p>In the editor topbar, click the storefront icon (next to the version history clock) to open the Marketplace panel. From the CLI, run <code>vibespot marketplace check</code>.</p>
+
+  <h3 id="marketplace-validator">What gets validated</h3>
+  <ul>
+    <li><strong>theme.json</strong> — HubSpot's required fields (<code>label</code>, <code>preview_path</code>, <code>screenshot_path</code>, <code>version</code>, <code>documentation_url</code>, <code>license</code>, <code>example_url</code>, <code>enable_domain_stylesheets</code>, <code>is_available_for_new_content</code>) and the <code>author</code> block (<code>name</code>, <code>email</code>, <code>url</code>).</li>
+    <li><strong>Modules</strong> — every <code>meta.json</code> needs a <code>label</code>; every field needs a <code>label</code>; <code>help_text</code> is recommended.</li>
+    <li><strong>Screenshot</strong> — the path declared in <code>theme.json</code> must point to an existing PNG/JPG.</li>
+    <li><strong>No CDN imports</strong> — <code>@import url(https://…)</code>, <code>&lt;link href="https://…"&gt;</code>, <code>&lt;script src="https://…"&gt;</code> are flagged.</li>
+    <li><strong>No portal-specific URLs</strong> — hard-coded <code>hubfs</code>, <code>hubspotusercontent</code>, or portal preview URLs are flagged.</li>
+    <li><strong>Accessibility baseline</strong> — <code>&lt;img&gt;</code> tags need <code>alt</code>, modules should use semantic tags.</li>
+    <li><strong>Listing metadata</strong> — a <code>marketplace.json</code> sidecar with category, description, features, support URL.</li>
+  </ul>
+
+  <h3 id="marketplace-fixes">Auto-fixable findings</h3>
+  <p>A subset of findings can be patched without user input — missing module labels and missing field labels (vibeSpot fills in human-readable defaults derived from the slug or field name), and external CDN <code>@import</code>/<code>&lt;link&gt;</code>/<code>&lt;script&gt;</code> references (stripped from CSS and module HTML). Click <strong>Apply fixes</strong> in the panel, or run <code>vibespot marketplace check --fix</code>.</p>
+
+  <h3 id="marketplace-listing">Listing metadata editor</h3>
+  <p>Click <strong>Edit listing</strong> in the panel (or run <code>vibespot marketplace edit</code>) to fill in the values that go on the Marketplace listing page: category, description, features, support URL, documentation URL, pricing tier. The values are written to a <code>marketplace.json</code> sidecar at the theme root and are picked up by the validator.</p>
+
+  <h3 id="marketplace-submission">Submitting to HubSpot</h3>
+  <p>vibeSpot does <strong>not</strong> submit the theme for you — that requires HubSpot Partner API access and a manual review process. Instead:</p>
+  <ol>
+    <li>Run the Marketplace check until it passes.</li>
+    <li>Upload the theme to your developer portal with <strong>Deploy</strong> (or <code>vibespot upload</code>).</li>
+    <li>In your HubSpot developer portal, open <em>Marketplace listings → Submit new listing</em> and paste the values from <code>marketplace.json</code>.</li>
+    <li>HubSpot reviews the listing and the theme on their side; address any feedback they send back.</li>
+  </ol>
+  <div class="doc-callout doc-callout--tip">
+    <div class="doc-callout__label">&#10024; Screenshots</div>
+    <p>HubSpot expects a 1500&times;1000 PNG at <code>screenshot_path</code> plus additional listing images uploaded directly through the portal. vibeSpot validates that the file exists; capturing it is up to you for now.</p>
+  </div>
+</div>
+
 <!-- ============================================================
      Section 8: Version History
      ============================================================ -->
@@ -1001,7 +1061,8 @@ vibespot</code></pre>
   <p>Each time the AI pipeline generates or modifies modules, vibeSpot creates a git commit in the theme's local repository. The commit message describes what changed (e.g., "Generated hero, features, pricing, footer" or "Modified hero: updated headline and background color"). No manual saving is required.</p>
 
   <h3 id="browsing-history">Browsing Versions</h3>
-  <p>Click the clock icon in the topbar to open the version history panel. You will see a timeline of all versions with:</p>
+  <p>The compact <strong>history timeline</strong> sits above the chat input — each pill is one generation step, labeled with the user message that produced it. The currently active version is highlighted. Hover any pill to see the commit hash, age, and the section names changed in that step.</p>
+  <p>For the deeper view, click the clock icon in the topbar to open the full version history panel with:</p>
   <ul>
     <li>Timestamp for each version</li>
     <li>Description of what changed</li>
@@ -1009,11 +1070,14 @@ vibespot</code></pre>
   </ul>
 
   <h3 id="rolling-back">Rolling Back</h3>
-  <p>Click any version in the timeline to restore the theme to that point. This is a non-destructive operation: vibeSpot creates a new commit that reverts to the selected state, so you never lose the intermediate history. You can always go forward again to a newer version.</p>
+  <p>Click any pill in the timeline (or any entry in the history panel) to restore the theme to that point. This is a non-destructive operation: vibeSpot creates a new commit that reverts to the selected state, so you never lose the intermediate history. You can always go forward again to a newer version.</p>
+
+  <h3 id="undo-redo-shortcuts">Keyboard Shortcuts</h3>
+  <p>Press <kbd>Ctrl</kbd>+<kbd>Z</kbd> (<kbd>Cmd</kbd>+<kbd>Z</kbd> on macOS) to step back one version, or <kbd>Ctrl</kbd>+<kbd>Y</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> to step forward. Shortcuts are ignored while the chat input or any other text field is focused, and while the AI is generating.</p>
 
   <div class="doc-callout doc-callout--tip">
     <div class="doc-callout__label">&#10024; Tip</div>
-    <p>Use version history as an undo system. If an AI generation goes in the wrong direction, roll back to the previous version and try a different prompt.</p>
+    <p>Use the timeline as a fast undo. If an AI generation goes in the wrong direction, hit Ctrl+Z to revert and try a different prompt.</p>
   </div>
 </div>
 
@@ -1022,7 +1086,7 @@ vibespot</code></pre>
      ============================================================ -->
 <div class="doc-section" id="settings">
   <h2 id="settings-heading">Settings Reference <a href="#settings" class="doc-anchor">#</a></h2>
-  <p>Open the Settings panel by clicking the gear icon in the topbar. Settings are organized into four tabs.</p>
+  <p>Open the Settings panel by clicking the gear icon in the topbar. Settings are organized into five tabs.</p>
 
   <h3 id="settings-ai">AI Tab</h3>
 
@@ -1032,6 +1096,7 @@ vibespot</code></pre>
       <div class="mock-settings__tabs">
         <span class="mock-settings__tab active">AI</span>
         <span class="mock-settings__tab">HubSpot</span>
+        <span class="mock-settings__tab">Figma</span>
         <span class="mock-settings__tab">GitHub</span>
         <span class="mock-settings__tab">vibeSpot</span>
       </div>
@@ -1139,6 +1204,18 @@ vibespot</code></pre>
     <li><strong>Switch/remove</strong> &mdash; Click an account to make it active. Click the remove button to disconnect it.</li>
   </ul>
 
+  <h3 id="settings-figma">Figma Tab</h3>
+  <p>The Figma tab manages authentication for the <a href="#figma-import">Figma Import</a> feature.</p>
+  <ul>
+    <li><strong>Figma Personal Access Token</strong> &mdash; Paste a token generated from your Figma account settings (Account Settings &rarr; Personal access tokens). The token needs <strong>File content (read-only)</strong> scope.</li>
+    <li><strong>Test Connection</strong> &mdash; Validates the token against the Figma API to confirm it is working.</li>
+    <li><strong>Token storage</strong> &mdash; The token is saved locally in <code>~/.vibespot/config.json</code> as <code>figmaToken</code> and is only sent to the Figma API.</li>
+  </ul>
+  <div class="doc-callout doc-callout--tip">
+    <div class="doc-callout__label">&#10024; One-off tokens</div>
+    <p>You can also enter a Figma token directly in the import dialog without saving it globally. This is useful for one-time imports or when using a shared machine.</p>
+  </div>
+
   <h3 id="settings-github">GitHub Tab</h3>
   <p>The GitHub tab configures authentication for source imports (used by the "From React" flow).</p>
   <ul>
@@ -1170,6 +1247,8 @@ vibespot</code></pre>
       <tr><td><code>vibespot init</code></td><td>Environment check &amp; setup</td></tr>
       <tr><td><code>vibespot convert</code></td><td>React-to-HubSpot conversion</td></tr>
       <tr><td><code>vibespot upload</code></td><td>Upload theme to HubSpot</td></tr>
+      <tr><td><code>vibespot marketplace check</code></td><td>Audit a theme against HubSpot Marketplace requirements</td></tr>
+      <tr><td><code>vibespot marketplace edit</code></td><td>Edit Marketplace listing metadata (<code>marketplace.json</code>)</td></tr>
       <tr><td><code>vibespot doctor</code></td><td>Diagnostics &amp; health check</td></tr>
     </tbody>
   </table>

package/ui/field-editor.js

@@ -26,7 +26,7 @@ async function openFieldEditor(moduleName) {
     const data = await res.json();
     const mod = data.modules.find((m) => m.moduleName === moduleName);
     if (!mod) {
-      editorContent.innerHTML = "<p>Module not found</p>";
+      editorContent.innerHTML = "<p>Section not found</p>";
       return;
     }