vibespot 1.0.8 → 1.1.0

package/ui/settings.js

@@ -24,8 +24,13 @@ const ENGINE_LABELS = {
 // Open / Close
 // ---------------------------------------------------------------------------
 
-function openSettings() {
+function openSettings(tab) {
   if (typeof closeMenu === "function") closeMenu();
+  if (tab) {
+    activeTab = tab;
+    const tabs = document.querySelectorAll("#settings-tabs .settings__tab");
+    tabs.forEach((t) => t.classList.toggle("active", t.dataset.tab === tab));
+  }
   document.getElementById("settings-overlay").classList.remove("hidden");
   refreshSettings();
 }
@@ -78,6 +83,7 @@ function renderSettings(data) {
   switch (activeTab) {
     case "ai": renderAITab(body, data); break;
     case "hubspot": renderHubSpotTab(body, data); break;
+    case "figma": renderFigmaTab(body, data); break;
     case "github": renderGitHubTab(body, data); break;
     case "vibespot": renderVibeSpotTab(body, data); break;
   }
@@ -209,6 +215,11 @@ function renderAITab(body, data) {
   agenticSection.appendChild(toggleRow);
   body.appendChild(agenticSection);
 
+  // AI Capabilities section — exposes Anthropic SDK features (extended
+  // thinking) and shows the status of features that auto-engage based on
+  // engine (prompt caching).
+  body.appendChild(renderAICapabilitiesSection(activeEngine, config));
+
   // API Keys section
   const keysSection = el("section", "settings__section");
   keysSection.appendChild(sectionTitle("API Keys"));
@@ -379,6 +390,222 @@ function renderAITab(body, data) {
   body.appendChild(cliSection);
 }
 
+// ---------------------------------------------------------------------------
+// AI Capabilities — feature toggles + capability status per engine
+// ---------------------------------------------------------------------------
+
+function renderAICapabilitiesSection(activeEngine, config) {
+  const section = el("section", "settings__section");
+  section.appendChild(sectionTitle("AI Capabilities"));
+  section.appendChild(desc("Advanced model features. Some are configurable directly; some auto-engage based on the active engine."));
+
+  // Engine classification — different engines have different feature surfaces.
+  const isAnthropicAPI = activeEngine === "anthropic-api" || activeEngine === "claude-oauth";
+  const isClaudeCode = activeEngine === "claude-code";
+  const isAnthropicAny = isAnthropicAPI || isClaudeCode;
+
+  // ---- Prompt Caching (auto on Anthropic engines — status indicator only) ----
+  section.appendChild(capabilityRow({
+    label: "Prompt Caching",
+    description: isClaudeCode
+      ? "Claude Code manages prompt caching internally — automatic, no configuration needed."
+      : "System prompts and tool schemas cached on Anthropic. Automatic — no setup needed.",
+    status: isAnthropicAny ? "active" : "n/a",
+    statusText: isAnthropicAPI ? "Active" : isClaudeCode ? "Auto (CLI-managed)" : "Anthropic only",
+  }));
+
+  // ---- Extended Thinking (toggle + budget) ----
+  const thinkingActive = !!config.extendedThinking && isAnthropicAPI;
+  const thinkingRow = capabilityRow({
+    label: "Extended Thinking",
+    description: isClaudeCode
+      ? "Claude Code uses thinking automatically when the model supports it. Budget can't be tuned via the CLI."
+      : "The model deliberates internally before responding. Higher quality on the Page Architect stage; slower and slightly more expensive.",
+    status: isAnthropicAPI ? (thinkingActive ? "active" : "off") : isClaudeCode ? "active" : "n/a",
+    statusText: isAnthropicAPI
+      ? thinkingActive ? "On" : "Off"
+      : isClaudeCode ? "Auto (CLI-managed)" : "Anthropic only",
+    toggle: isAnthropicAPI
+      ? {
+          active: thinkingActive,
+          onChange: async (val) => {
+            await fetch("/api/settings", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ extendedThinking: val }),
+            });
+            refreshSettings();
+          },
+        }
+      : null,
+  });
+  section.appendChild(thinkingRow);
+
+  // Budget selector — only meaningful when thinking is enabled
+  if (isAnthropicAPI && thinkingActive) {
+    const budgetRow = el("div", "settings__capability-sub");
+    const budgetLabel = el("span", "settings__capability-sub-label");
+    budgetLabel.textContent = "Budget";
+    budgetRow.appendChild(budgetLabel);
+
+    const budgetSelect = el("select", "settings__capability-select");
+    const budgets = [
+      { id: "low", label: "Low (~4k tokens)" },
+      { id: "medium", label: "Medium (~16k tokens)" },
+      { id: "high", label: "High (~32k tokens)" },
+    ];
+    for (const b of budgets) {
+      const opt = document.createElement("option");
+      opt.value = b.id;
+      opt.textContent = b.label;
+      if ((config.extendedThinkingBudget || "medium") === b.id) opt.selected = true;
+      budgetSelect.appendChild(opt);
+    }
+    budgetSelect.addEventListener("change", async () => {
+      await fetch("/api/settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ extendedThinkingBudget: budgetSelect.value }),
+      });
+      refreshSettings();
+    });
+    budgetRow.appendChild(budgetSelect);
+
+    const hint = el("span", "settings__capability-sub-hint");
+    hint.textContent = "Higher = more deliberation, more cost";
+    budgetRow.appendChild(hint);
+
+    section.appendChild(budgetRow);
+  }
+
+  // ---- Web Search (toggle on Anthropic API + Claude Code CLI) ----
+  const webSearchSupported = isAnthropicAny;
+  const webSearchActive = !!config.webSearch && webSearchSupported;
+  section.appendChild(capabilityRow({
+    label: "Web Search",
+    description: isClaudeCode
+      ? "Allow Claude Code to search the web (passes --allowed-tools WebSearch). Adds cost and may surface irrelevant results."
+      : "Let the AI search the web for context (competitor pages, industry references) during planning. Adds cost and may surface irrelevant results.",
+    status: !webSearchSupported ? "n/a" : webSearchActive ? "active" : "off",
+    statusText: !webSearchSupported
+      ? "Anthropic / Claude Code only"
+      : webSearchActive ? "On" : "Off",
+    toggle: webSearchSupported
+      ? {
+          active: webSearchActive,
+          onChange: async (val) => {
+            await fetch("/api/settings", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ webSearch: val }),
+            });
+            refreshSettings();
+          },
+        }
+      : null,
+  }));
+
+  // ---- Citations (auto-on for documents — status only) ----
+  section.appendChild(capabilityRow({
+    label: "Citations",
+    description: "When you upload PDFs/docs, the model can cite specific passages it referenced.",
+    status: "soon",
+    statusText: "Coming soon",
+  }));
+
+  return section;
+}
+
+function capabilityRow({ label, description, status, statusText, toggle }) {
+  const row = el("div", "settings__capability-row");
+
+  const labelWrap = el("div", "settings__capability-label-wrap");
+  const labelEl = el("div", "settings__capability-label");
+  labelEl.textContent = label;
+  const badge = el("span", "settings__capability-badge settings__capability-badge--" + status);
+  badge.textContent = statusText;
+  labelEl.appendChild(badge);
+  labelWrap.appendChild(labelEl);
+
+  const descEl = el("div", "settings__capability-desc");
+  descEl.textContent = description;
+  labelWrap.appendChild(descEl);
+
+  row.appendChild(labelWrap);
+
+  if (toggle) {
+    const btn = el("button", "settings__toggle" + (toggle.active ? " active" : ""));
+    btn.addEventListener("click", () => toggle.onChange(!toggle.active));
+    row.appendChild(btn);
+  }
+
+  return row;
+}
+
+// ---------------------------------------------------------------------------
+// Figma Tab
+// ---------------------------------------------------------------------------
+
+function renderFigmaTab(body, data) {
+  const config = data.config;
+
+  const section = el("section", "settings__section");
+  section.appendChild(sectionTitle("Personal Access Token"));
+  section.appendChild(desc("Connect your Figma account to import designs directly into HubSpot CMS modules. Tokens are stored locally and only used to call the Figma API."));
+
+  const figmaToken = config.figmaToken;
+  const figmaKeyInfo = {
+    configured: !!figmaToken,
+    masked: figmaToken || "",
+  };
+  section.appendChild(createApiKeyCard("figma", "Figma PAT", "figd_...", figmaKeyInfo));
+
+  // Help link + Test Connection
+  const actionsRow = el("div", "settings__card-row");
+  actionsRow.style.paddingTop = "4px";
+  const helpLink = el("a", "settings__btn");
+  helpLink.textContent = "How to get a token";
+  helpLink.href = "https://help.figma.com/hc/en-us/articles/8085703771159";
+  helpLink.target = "_blank";
+  helpLink.style.textDecoration = "none";
+  helpLink.style.fontSize = "12px";
+  actionsRow.appendChild(helpLink);
+
+  const testBtn = el("button", "settings__btn settings__btn--small");
+  testBtn.textContent = "Test Connection";
+  testBtn.disabled = !figmaKeyInfo.configured;
+  testBtn.addEventListener("click", async () => {
+    testBtn.disabled = true;
+    testBtn.textContent = "Testing...";
+    try {
+      const res = await fetch("/api/figma/test-token", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({}),
+      });
+      const result = await res.json();
+      if (result.ok) {
+        testBtn.textContent = "\u2713 Connected as " + result.user;
+        testBtn.style.color = "var(--success)";
+      } else {
+        testBtn.textContent = "\u2717 " + (result.error || "Failed");
+        testBtn.style.color = "var(--warning)";
+      }
+    } catch {
+      testBtn.textContent = "\u2717 Connection failed";
+      testBtn.style.color = "var(--warning)";
+    }
+    setTimeout(() => {
+      testBtn.textContent = "Test Connection";
+      testBtn.style.color = "";
+      testBtn.disabled = !figmaKeyInfo.configured;
+    }, 3000);
+  });
+  actionsRow.appendChild(testBtn);
+  section.appendChild(actionsRow);
+  body.appendChild(section);
+}
+
 // ---------------------------------------------------------------------------
 // HubSpot Tab
 // ---------------------------------------------------------------------------

package/ui/setup.js

@@ -884,7 +884,7 @@ function togglePanel(action) {
   panels.forEach((p) => p.classList.add("hidden"));
   buttons.forEach((b) => b.classList.remove("active"));
 
-  const panelMap = { new: "panel-new", continue: "panel-continue", download: "panel-download", convert: "panel-convert" };
+  const panelMap = { new: "panel-new", continue: "panel-continue", download: "panel-download", figma: "panel-figma", convert: "panel-convert" };
   const panel = document.getElementById(panelMap[action]);
   if (panel) {
     panel.classList.remove("hidden");
@@ -898,6 +898,7 @@ function togglePanel(action) {
   // Focus input if applicable
   if (action === "new") setTimeout(() => document.getElementById("new-theme-name")?.focus(), 50);
   if (action === "convert") setTimeout(() => document.getElementById("import-url")?.focus(), 50);
+  if (action === "figma") initFigmaPanel();
 
   // Load remote themes on first open
   if (action === "download" && !remoteThemesLoaded) loadDownloadPanel();
@@ -1135,6 +1136,293 @@ document.getElementById("import-url").addEventListener("keydown", (e) => {
 // Helpers
 // ---------------------------------------------------------------------------
 
+// ---------------------------------------------------------------------------
+// Figma import
+// ---------------------------------------------------------------------------
+
+let figmaExtractionId = null;
+
+async function initFigmaPanel() {
+  const tokenPrompt = document.getElementById("figma-token-prompt");
+  const urlSection = document.getElementById("figma-url-section");
+
+  // Check if token is configured
+  try {
+    const res = await fetch("/api/settings/status");
+    const data = await res.json();
+    const hasToken = !!data.config?.figmaToken;
+    tokenPrompt.classList.toggle("hidden", hasToken);
+    urlSection.style.opacity = hasToken ? "1" : "0.5";
+    urlSection.style.pointerEvents = hasToken ? "auto" : "none";
+  } catch {
+    tokenPrompt.classList.remove("hidden");
+  }
+
+  setTimeout(() => {
+    const urlInput = document.getElementById("figma-url");
+    if (urlInput && !urlInput.closest(".hidden")) urlInput.focus();
+  }, 50);
+}
+
+// Inline token save
+document.getElementById("figma-save-token")?.addEventListener("click", async () => {
+  const input = document.getElementById("figma-inline-token");
+  const token = input.value.trim();
+  if (!token) return;
+  const btn = document.getElementById("figma-save-token");
+  btn.disabled = true;
+  btn.textContent = "Saving...";
+  try {
+    await fetch("/api/settings/apikey", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ provider: "figma", apiKey: token }),
+    });
+    input.value = "";
+    btn.textContent = "Saved!";
+    setTimeout(() => { btn.textContent = "Save"; btn.disabled = false; }, 1500);
+    initFigmaPanel(); // refresh state
+  } catch {
+    btn.textContent = "Failed";
+    setTimeout(() => { btn.textContent = "Save"; btn.disabled = false; }, 2000);
+  }
+});
+
+// Settings link in Figma panel
+document.getElementById("figma-open-settings")?.addEventListener("click", (e) => {
+  e.preventDefault();
+  if (typeof openSettings === "function") openSettings("figma");
+});
+
+// Extract button
+document.getElementById("figma-extract-btn")?.addEventListener("click", async () => {
+  const urlInput = document.getElementById("figma-url");
+  const url = urlInput.value.trim();
+  if (!url) return;
+
+  // Basic client-side validation
+  if (!url.match(/figma\.com\/(design|file)\//)) {
+    showError("Not a valid Figma URL. Expected: figma.com/design/...");
+    return;
+  }
+
+  const btn = document.getElementById("figma-extract-btn");
+  btn.disabled = true;
+  btn.textContent = "Extracting...";
+  urlInput.disabled = true;
+
+  const progressEl = document.getElementById("figma-progress");
+  progressEl.classList.remove("hidden");
+  progressEl.innerHTML = `<span class="figma-progress__line">Connecting to Figma...</span>`;
+
+  try {
+    const res = await fetch("/api/figma/extract", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ url }),
+    });
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    let result = null;
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+
+      // Parse SSE events from buffer
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+      for (const line of lines) {
+        if (!line.startsWith("data: ")) continue;
+        try {
+          const event = JSON.parse(line.slice(6));
+          if (event.type === "progress") {
+            const span = document.createElement("span");
+            span.className = "figma-progress__line";
+            span.textContent = event.message;
+            progressEl.appendChild(span);
+            progressEl.scrollTop = progressEl.scrollHeight;
+          } else if (event.type === "complete") {
+            result = event;
+          }
+        } catch { /* skip malformed lines */ }
+      }
+    }
+
+    if (!result || !result.ok) {
+      showError(result?.error || "Extraction failed");
+      btn.disabled = false;
+      btn.textContent = "Extract";
+      urlInput.disabled = false;
+      return;
+    }
+
+    figmaExtractionId = result.extractionId;
+    progressEl.classList.add("hidden");
+    renderFigmaSummary(result.summary);
+
+    // Auto-fill theme name from extraction summary
+    const nameInput = document.getElementById("figma-theme-name");
+    if (nameInput) {
+      nameInput.value = result.summary.suggestedThemeName || result.summary.fileName
+        ?.toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/(^-|-$)/g, "")
+        .slice(0, 40) || "";
+    }
+
+    document.getElementById("figma-generate").classList.remove("hidden");
+    btn.textContent = "Extracted";
+  } catch (err) {
+    showError("Extraction failed: " + err.message);
+    btn.disabled = false;
+    btn.textContent = "Extract";
+    urlInput.disabled = false;
+  }
+});
+
+function renderFigmaSummary(summary) {
+  const container = document.getElementById("figma-summary");
+  container.classList.remove("hidden");
+
+  let html = `<div class="figma-summary">`;
+  html += `<div class="figma-summary__title">${esc(summary.fileName)}</div>`;
+  html += `<div class="figma-summary__stats">`;
+  html += `<span>${summary.sectionCount} section${summary.sectionCount !== 1 ? "s" : ""}</span>`;
+  html += `<span>${summary.assetCount} asset${summary.assetCount !== 1 ? "s" : ""}</span>`;
+  html += `<span>${summary.fontFamilies?.length || 0} font${(summary.fontFamilies?.length || 0) !== 1 ? "s" : ""}</span>`;
+  html += `</div>`;
+
+  // Color swatches
+  if (summary.colorPalette?.length) {
+    html += `<div class="figma-swatches">`;
+    for (const color of summary.colorPalette.slice(0, 8)) {
+      html += `<span class="figma-swatch" style="background:${esc(color)}" title="${esc(color)}"></span>`;
+    }
+    html += `</div>`;
+  }
+
+  // Section names
+  if (summary.sectionNames?.length) {
+    html += `<div class="figma-summary__sections">`;
+    for (const name of summary.sectionNames) {
+      html += `<span class="figma-summary__section-tag">${esc(name)}</span>`;
+    }
+    html += `</div>`;
+  }
+
+  html += `</div>`;
+  container.innerHTML = html;
+}
+
+// Image mode toggle hint
+document.getElementById("figma-use-assets")?.addEventListener("change", (e) => {
+  const hint = document.getElementById("figma-image-hint");
+  if (hint) {
+    hint.textContent = e.target.checked
+      ? "Images uploaded to HubSpot, no manual replacement needed"
+      : "Image fields with placeholders, swap in HubSpot editor";
+  }
+});
+
+// Generate button
+document.getElementById("figma-generate-btn")?.addEventListener("click", () => {
+  const nameInput = document.getElementById("figma-theme-name");
+  const themeName = nameInput.value.trim();
+  if (!themeName) { nameInput.focus(); return; }
+  if (!figmaExtractionId) { showError("No extraction available — extract first"); return; }
+  const useAssets = document.getElementById("figma-use-assets")?.checked ?? true;
+  startFigmaImport(figmaExtractionId, themeName, useAssets);
+});
+
+document.getElementById("figma-theme-name")?.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") { e.preventDefault(); document.getElementById("figma-generate-btn")?.click(); }
+});
+
+async function startFigmaImport(extractionId, themeName, useAssets = true) {
+  // Disable generate button
+  const genBtn = document.getElementById("figma-generate-btn");
+  if (genBtn) { genBtn.disabled = true; genBtn.textContent = "Converting..."; }
+
+  // Show progress in the same progress element
+  const progressEl = document.getElementById("figma-progress");
+  progressEl.classList.remove("hidden");
+  progressEl.innerHTML = `<span class="figma-progress__line">Creating theme...</span>`;
+
+  // 1. Create theme on server first
+  try {
+    const res = await fetch("/api/setup/create", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name: themeName }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      showError(data.error);
+      if (genBtn) { genBtn.disabled = false; genBtn.textContent = "Generate Page"; }
+      return;
+    }
+  } catch (err) {
+    showError("Failed to create theme: " + err.message);
+    if (genBtn) { genBtn.disabled = false; genBtn.textContent = "Generate Page"; }
+    return;
+  }
+
+  // 2. Run pipeline via SSE — stay on setup screen
+  try {
+    const res = await fetch("/api/figma/generate", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ extractionId, themeName, useAssets }),
+    });
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    let result = null;
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+      for (const line of lines) {
+        if (!line.startsWith("data: ")) continue;
+        try {
+          const event = JSON.parse(line.slice(6));
+          if (event.type === "progress") {
+            const span = document.createElement("span");
+            span.className = "figma-progress__line";
+            span.textContent = event.message;
+            progressEl.appendChild(span);
+            progressEl.scrollTop = progressEl.scrollHeight;
+          } else if (event.type === "complete") {
+            result = event;
+          }
+        } catch { /* skip malformed */ }
+      }
+    }
+
+    if (!result || !result.ok) {
+      showError(result?.error || "Conversion failed");
+      if (genBtn) { genBtn.disabled = false; genBtn.textContent = "Generate Page"; }
+      return;
+    }
+
+    // 3. Done — navigate directly to chat (skip dashboard)
+    if (genBtn) genBtn.textContent = "Done!";
+    setTimeout(() => showAppDirect(themeName), 500);
+  } catch (err) {
+    showError("Conversion failed: " + err.message);
+    if (genBtn) { genBtn.disabled = false; genBtn.textContent = "Generate Page"; }
+  }
+}
+
 function esc(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }