vibespot 1.5.0 → 1.6.0

package/ui/settings.js

@@ -10,6 +10,98 @@ let settingsData = null;
 let activeTab = "ai";
 const activePolls = {};
 
+// VIB-1835: /api/settings/status is now config-only and renders instantly. The
+// expensive bits — live model lists and CLI/auth detection — are fetched on
+// demand and cached here, layered over the fast /status response on each render.
+let liveModels = null;                              // from /api/settings/models
+let scannedTools = {};                              // tool entries from /api/settings/tools
+let scannedEngines = null;                          // availableEngines refined by an AI scan
+const scannedGroups = { ai: false, platform: false };
+let bgScanStarted = false;                          // one-time background scan guard (per open)
+
+function resetScanState() {
+  liveModels = null;
+  scannedTools = {};
+  scannedEngines = null;
+  scannedGroups.ai = false;
+  scannedGroups.platform = false;
+  bgScanStarted = false;
+}
+
+// Layer the on-demand caches over the fast /status payload so a re-render after
+// any action keeps already-fetched models / scanned tool state.
+function applyScanCaches(data) {
+  if (!data || !data.environment) return;
+  if (liveModels) data.models = liveModels;
+  if (Object.keys(scannedTools).length) {
+    data.environment.tools = { ...data.environment.tools, ...scannedTools };
+  }
+  if (scannedEngines) data.environment.availableEngines = scannedEngines;
+}
+
+async function fetchModels(refresh) {
+  try {
+    const res = await fetch("/api/settings/models" + (refresh ? "?refresh=1" : ""));
+    const data = await res.json();
+    if (data && data.models) {
+      liveModels = data.models;
+      if (settingsData) settingsData.models = liveModels;
+      return true;
+    }
+  } catch { /* keep STATIC_MODELS */ }
+  return false;
+}
+
+async function fetchTools(group, refresh) {
+  try {
+    const qs = `?group=${group}` + (refresh ? "&refresh=1" : "");
+    const res = await fetch("/api/settings/tools" + qs);
+    const data = await res.json();
+    if (data && data.tools) {
+      scannedTools = { ...scannedTools, ...data.tools };
+      if (Array.isArray(data.availableEngines)) scannedEngines = data.availableEngines;
+      if (group === "ai" || group === "all") scannedGroups.ai = true;
+      if (group === "platform" || group === "all") scannedGroups.platform = true;
+      return true;
+    }
+  } catch { /* leave "not scanned" */ }
+  return false;
+}
+
+// Hybrid default (Boris-approved): after the instant render, kick off one
+// non-blocking scan of models + all tools, then re-render in place. Every later
+// open repeats this once; explicit Refresh/Scan/Check buttons are always live.
+function maybeStartBackgroundScan() {
+  if (bgScanStarted) return;
+  bgScanStarted = true;
+  Promise.all([fetchModels(false), fetchTools("all", false)]).then((results) => {
+    // Don't yank a re-render out from under someone mid-typing.
+    if (results.some(Boolean) && settingsData && !settingsHasFocusedInput()) {
+      renderSettings(settingsData);
+    }
+  });
+}
+
+function settingsHasFocusedInput() {
+  const body = document.getElementById("settings-body");
+  const ae = document.activeElement;
+  return !!(body && ae && body.contains(ae) && (ae.tagName === "INPUT" || ae.tagName === "SELECT"));
+}
+
+// Small button that runs an on-demand scan with a spinner, then re-renders the
+// active tab (which recreates this button in its resolved state).
+function makeScanButton(label, onScan, extraClass) {
+  const btn = el("button", "settings__btn settings__btn--small" + (extraClass ? " " + extraClass : ""));
+  btn.textContent = label;
+  btn.addEventListener("click", async () => {
+    btn.disabled = true;
+    btn.innerHTML = '<span class="settings__spinner"></span> ' + escSettings(label) + "…";
+    await onScan();
+    if (settingsData) renderSettings(settingsData);
+  });
+  return btn;
+}
+
 const ENGINE_LABELS = {
   "claude-code": "Claude Code",
   "anthropic-api": "Anthropic API",
@@ -34,6 +126,7 @@ function openSettings(tab) {
   }
   const overlay = document.getElementById("settings-overlay");
   if (overlay) overlay.classList.remove("hidden");
+  resetScanState();
   refreshSettings();
 }
 
@@ -70,14 +163,17 @@ async function refreshSettings() {
   const body = document.getElementById("settings-body");
   body.innerHTML = `<div class="settings__loading"><div class="settings__spinner-lg"></div><span>Loading environment...</span></div>`;
 
+  // /status is config-only and returns in single-digit ms; this is just a relaxed
+  // safety net for an unreachable server, not the old 3s budget that timed out.
   const controller = new AbortController();
-  const timeout = setTimeout(() => controller.abort(), 3000);
+  const timeout = setTimeout(() => controller.abort(), 12000);
 
   try {
     const res = await fetch("/api/settings/status", { signal: controller.signal });
     clearTimeout(timeout);
     settingsData = await res.json();
     renderSettings(settingsData);
+    maybeStartBackgroundScan();
   } catch (err) {
     clearTimeout(timeout);
     const aborted = err && err.name === "AbortError";
@@ -108,6 +204,7 @@ function renderSettingsError(body, timedOut) {
 }
 
 function renderSettings(data) {
+  applyScanCaches(data);
   const body = document.getElementById("settings-body");
   body.innerHTML = "";
 
@@ -156,8 +253,43 @@ function renderAITab(body, data) {
   }
   section.appendChild(selectEl);
 
-  // Model selector
+  // Langdock provider selector — shown only when Langdock is the active engine
   const activeEngine = config.aiEngine || (env.availableEngines.length > 0 ? env.availableEngines[0] : null);
+  const langdockProvider = config.langdockProvider || "anthropic";
+
+  if (activeEngine === "langdock-api") {
+    const providerRow = el("div", "settings__model-row");
+    const providerLabel = el("span", "settings__card-label");
+    providerLabel.textContent = "Provider";
+    providerRow.appendChild(providerLabel);
+
+    const providerSelect = el("select", "settings__model-select");
+    const providers = [
+      { id: "anthropic", label: "Anthropic (Claude)" },
+      { id: "openai", label: "OpenAI (GPT)" },
+      { id: "google", label: "Google (Gemini)" },
+      { id: "mistral", label: "Mistral" },
+    ];
+    for (const p of providers) {
+      const opt = document.createElement("option");
+      opt.value = p.id;
+      opt.textContent = p.label;
+      if (p.id === langdockProvider) opt.selected = true;
+      providerSelect.appendChild(opt);
+    }
+    providerSelect.addEventListener("change", async () => {
+      await fetch("/api/settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ langdockProvider: providerSelect.value }),
+      });
+      refreshSettings();
+    });
+    providerRow.appendChild(providerSelect);
+    section.appendChild(providerRow);
+  }
+
+  // Model selector
   if (activeEngine) {
     const modelRow = el("div", "settings__model-row");
     const modelLabel = el("span", "settings__card-label");
@@ -195,6 +327,9 @@ function renderAITab(body, data) {
     });
 
     modelRow.appendChild(modelSelect);
+    // Dropdowns populate instantly from STATIC_MODELS; Refresh pulls the live
+    // provider catalog on demand (VIB-1835).
+    modelRow.appendChild(makeScanButton("Refresh", () => fetchModels(true)));
     section.appendChild(modelRow);
   }
 
@@ -341,7 +476,14 @@ function renderAITab(body, data) {
   // CLI Tools section with toggles
   const cliSection = el("section", "settings__section");
   cliSection.appendChild(sectionTitle("CLI Tools"));
-  cliSection.appendChild(desc("Enable CLI tools you have installed. Install status is only checked when you toggle a tool on, so disabled tools add zero overhead."));
+  cliSection.appendChild(desc("Enable the CLI tools you have installed. Install and auth status is detected on demand — scan to check or refresh it."));
+
+  const cliScanRow = el("div", "settings__card-row");
+  const cliScanHint = el("span", "settings__card-meta");
+  cliScanHint.textContent = scannedGroups.ai ? "Status scanned" : "Not scanned yet";
+  cliScanRow.appendChild(cliScanHint);
+  cliScanRow.appendChild(makeScanButton(scannedGroups.ai ? "Rescan" : "Scan AI tools", () => fetchTools("ai", true)));
+  cliSection.appendChild(cliScanRow);
 
   const cliTools = [
     { key: "claudeCode", id: "claude-code", name: "Claude Code", installId: "claude", url: "https://claude.ai/code" },
@@ -362,7 +504,12 @@ function renderAITab(body, data) {
     label.textContent = tool.name;
     labelWrap.appendChild(label);
 
-    if (enabled && info.found) {
+    if (enabled && !scannedGroups.ai) {
+      const sub = el("div", "settings__toggle-label-sub");
+      sub.textContent = "Not scanned";
+      sub.style.color = "var(--text-muted)";
+      labelWrap.appendChild(sub);
+    } else if (enabled && info.found) {
       const sub = el("div", "settings__toggle-label-sub");
       sub.textContent = `v${info.version}` + (info.authenticated ? " \u2014 authenticated" : " \u2014 not authenticated");
       sub.style.color = info.authenticated ? "var(--success)" : "var(--warning)";
@@ -390,8 +537,9 @@ function renderAITab(body, data) {
 
     row.appendChild(toggleRow);
 
-    // If enabled but not installed, show install button
-    if (enabled && !info.found) {
+    // If enabled but not installed, show install button (only once we've scanned
+    // — before that, info.found is just an unscanned placeholder).
+    if (enabled && scannedGroups.ai && !info.found) {
       const installRow = el("div", "settings__card-row");
       const installBtn = el("button", "settings__btn settings__btn--primary");
       installBtn.textContent = "Install";
@@ -409,7 +557,7 @@ function renderAITab(body, data) {
     }
 
     // If enabled, installed, but not authenticated — show sign in
-    if (enabled && info.found && !info.authenticated) {
+    if (enabled && scannedGroups.ai && info.found && !info.authenticated) {
       const authRow = el("div", "settings__card-row");
       const authBtn = el("button", "settings__btn settings__btn--primary");
       authBtn.textContent = "Sign in";
@@ -421,6 +569,105 @@ function renderAITab(body, data) {
     cliSection.appendChild(row);
   }
   body.appendChild(cliSection);
+
+  // Observability section — opt-in Langfuse keys, base URL, and enable toggle
+  body.appendChild(renderObservabilitySection(env, config));
+}
+
+// ---------------------------------------------------------------------------
+// Observability — Langfuse keys + base URL + enable toggle
+// ---------------------------------------------------------------------------
+
+function renderObservabilitySection(env, config) {
+  const section = el("section", "settings__section");
+  section.appendChild(sectionTitle("Observability"));
+  section.appendChild(desc("Langfuse captures token usage, estimated cost, and traces for every API model call. Off by default — turn it on with the toggle and set both keys to start sending traces. Keys are stored locally in ~/.vibespot/config.json and sent only to your Langfuse instance."));
+
+  const pub = env.apiKeys.langfusePublic || { configured: false, masked: "" };
+  const sec = env.apiKeys.langfuseSecret || { configured: false, masked: "" };
+  const hasKeys = pub.configured && sec.configured;
+  const enabledFlag = config.langfuseEnabled; // undefined | true | false
+  const isOn = enabledFlag === true;           // off by default; explicit opt-in required
+
+  // Enable toggle
+  const toggleRow = el("div", "settings__toggle-row");
+  const labelWrap = el("div", "");
+  const label = el("div", "settings__toggle-label");
+  label.textContent = "Send traces to Langfuse";
+  labelWrap.appendChild(label);
+
+  const sub = el("div", "settings__toggle-label-sub");
+  if (!isOn) {
+    sub.textContent = "Off — no traces or usage sent";
+    sub.style.color = "var(--text-muted)";
+  } else if (hasKeys) {
+    sub.textContent = "Active — traces, token usage & cost sent to Langfuse";
+    sub.style.color = "var(--success)";
+  } else {
+    sub.textContent = "Enabled — add a public + secret key below to start sending traces";
+    sub.style.color = "var(--warning)";
+  }
+  labelWrap.appendChild(sub);
+  toggleRow.appendChild(labelWrap);
+
+  const toggle = el("button", "settings__toggle" + (isOn ? " active" : ""));
+  toggle.addEventListener("click", async () => {
+    await fetch("/api/settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ langfuseEnabled: !isOn }),
+    });
+    refreshSettings();
+  });
+  toggleRow.appendChild(toggle);
+  section.appendChild(toggleRow);
+
+  // Keys — masked display, persisted via the shared /api/settings/apikey route
+  section.appendChild(createApiKeyCard("langfuse-public", "Public Key", "pk-lf-...", pub));
+  section.appendChild(createApiKeyCard("langfuse-secret", "Secret Key", "sk-lf-...", sec));
+
+  // Base URL
+  const urlCard = el("div", "settings__card");
+  const urlRow = el("div", "settings__card-row");
+  urlRow.style.gap = "8px";
+  const urlLabel = el("span", "settings__card-label");
+  urlLabel.textContent = "Base URL";
+  urlRow.appendChild(urlLabel);
+
+  const urlInput = el("input", "settings__apikey-input");
+  urlInput.type = "text";
+  urlInput.placeholder = "https://cloud.langfuse.com";
+  urlInput.value = config.langfuseBaseUrl || "";
+  urlRow.appendChild(urlInput);
+
+  const urlSaveBtn = el("button", "settings__btn settings__btn--primary");
+  urlSaveBtn.textContent = "Save";
+  const saveBaseUrl = async () => {
+    urlSaveBtn.disabled = true;
+    urlSaveBtn.textContent = "Saving...";
+    await fetch("/api/settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ langfuseBaseUrl: urlInput.value.trim() }),
+    });
+    refreshSettings();
+  };
+  urlSaveBtn.addEventListener("click", saveBaseUrl);
+  urlInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") { e.preventDefault(); saveBaseUrl(); }
+  });
+  urlRow.appendChild(urlSaveBtn);
+  urlCard.appendChild(urlRow);
+
+  const urlHint = el("div", "settings__toggle-label-sub");
+  urlHint.textContent = "cloud.langfuse.com (EU) · us.cloud.langfuse.com (US) · or your self-host URL. Leave blank for EU cloud.";
+  urlHint.style.color = "var(--text-muted)";
+  urlHint.style.marginTop = "6px";
+  urlCard.appendChild(urlHint);
+
+  section.appendChild(urlCard);
+
+  return section;
 }
 
 // ---------------------------------------------------------------------------
@@ -433,7 +680,10 @@ function renderAICapabilitiesSection(activeEngine, config) {
   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";
+  // Langdock inherits capabilities from the selected upstream provider.
+  const ldProv = (config.langdockProvider || "anthropic");
+  const isLangdockAnthropic = activeEngine === "langdock-api" && ldProv === "anthropic";
+  const isAnthropicAPI = activeEngine === "anthropic-api" || activeEngine === "claude-oauth" || isLangdockAnthropic;
   const isClaudeCode = activeEngine === "claude-code";
   const isAnthropicAny = isAnthropicAPI || isClaudeCode;
 
@@ -733,6 +983,28 @@ function renderHubSpotTab(body, data) {
     // CLI mode — show CLI status and accounts from hs accounts list
     acctSection.appendChild(desc("HubSpot CLI accounts are managed by the hs command. Use \u201chs auth\u201d to add accounts."));
 
+    // The hs CLI + accounts probe is a subprocess, so it runs on demand rather
+    // than on every settings open (VIB-1835).
+    const hsCheckRow = el("div", "settings__card-row");
+    const hsCheckHint = el("span", "settings__card-meta");
+    hsCheckHint.textContent = scannedGroups.platform ? "Status checked" : "Not checked yet";
+    hsCheckRow.appendChild(hsCheckHint);
+    hsCheckRow.appendChild(makeScanButton(scannedGroups.platform ? "Recheck" : "Check", () => fetchTools("platform", true)));
+    acctSection.appendChild(hsCheckRow);
+
+    if (!scannedGroups.platform) {
+      const pending = el("div", "settings__card");
+      const prow = el("div", "settings__card-row");
+      prow.appendChild(dot("muted"));
+      const plabel = el("span", "settings__card-label");
+      plabel.textContent = "HubSpot CLI — not scanned";
+      prow.appendChild(plabel);
+      pending.appendChild(prow);
+      acctSection.appendChild(pending);
+      body.appendChild(acctSection);
+      return;
+    }
+
     const cliCard = el("div", "settings__card");
     const cliRow = el("div", "settings__card-row");
     cliRow.appendChild(dot(hs.found ? "success" : "warn"));
@@ -865,6 +1137,28 @@ function renderGitHubTab(body, data) {
   section.appendChild(sectionTitle("GitHub CLI"));
   section.appendChild(desc("GitHub CLI enables pushing your theme to a repository. Optional \u2014 not needed for HubSpot deployment."));
 
+  // GitHub install/auth is detected via subprocess, so it's checked on demand
+  // rather than on every settings open (VIB-1835).
+  const checkRow = el("div", "settings__card-row");
+  const checkHint = el("span", "settings__card-meta");
+  checkHint.textContent = scannedGroups.platform ? "Status checked" : "Not checked yet";
+  checkRow.appendChild(checkHint);
+  checkRow.appendChild(makeScanButton(scannedGroups.platform ? "Recheck" : "Check", () => fetchTools("platform", true)));
+  section.appendChild(checkRow);
+
+  if (!scannedGroups.platform) {
+    const pending = el("div", "settings__card");
+    const pendingRow = el("div", "settings__card-row");
+    pendingRow.appendChild(dot("muted"));
+    const pendingLabel = el("span", "settings__card-label");
+    pendingLabel.textContent = "GitHub CLI \u2014 not scanned";
+    pendingRow.appendChild(pendingLabel);
+    pending.appendChild(pendingRow);
+    section.appendChild(pending);
+    body.appendChild(section);
+    return;
+  }
+
   const card = el("div", "settings__card");
 
   // CLI status
@@ -1473,14 +1767,38 @@ function getModelsForEngine(engine) {
         { id: "gpt-5.4-nano", label: "GPT-5.4 Nano" },
         { id: "codex-mini-latest", label: "Codex Mini (latest)" },
       ];
-    case "langdock-api":
-      return [
-        { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6 (default)" },
-        { id: "claude-opus-4-7", label: "Claude Opus 4.7" },
-        { id: "claude-opus-4-6", label: "Claude Opus 4.6" },
-        { id: "claude-sonnet-4-5", label: "Claude Sonnet 4.5" },
-        { id: "claude-haiku-4-5-20251001", label: "Claude Haiku 4.5" },
-      ];
+    case "langdock-api": {
+      const ldProvider = (settingsData && settingsData.config && settingsData.config.langdockProvider) || "anthropic";
+      const ldModels = {
+        anthropic: [
+          { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6 (default)" },
+          { id: "claude-opus-4-7", label: "Claude Opus 4.7" },
+          { id: "claude-opus-4-6", label: "Claude Opus 4.6" },
+          { id: "claude-sonnet-4-5", label: "Claude Sonnet 4.5" },
+          { id: "claude-haiku-4-5-20251001", label: "Claude Haiku 4.5" },
+        ],
+        openai: [
+          { id: "gpt-4.1", label: "GPT-4.1 (default)" },
+          { id: "gpt-4.1-mini", label: "GPT-4.1 Mini" },
+          { id: "gpt-4.1-nano", label: "GPT-4.1 Nano" },
+          { id: "gpt-4o", label: "GPT-4o" },
+          { id: "o3-mini", label: "o3 Mini" },
+        ],
+        google: [
+          { id: "gemini-2.5-pro", label: "Gemini 2.5 Pro (default)" },
+          { id: "gemini-2.5-flash", label: "Gemini 2.5 Flash" },
+          { id: "gemini-2.0-flash", label: "Gemini 2.0 Flash" },
+        ],
+        mistral: [
+          { id: "mistral-large-latest", label: "Mistral Large (default)" },
+          { id: "mistral-medium-latest", label: "Mistral Medium" },
+          { id: "mistral-small-latest", label: "Mistral Small" },
+          { id: "codestral-latest", label: "Codestral" },
+          { id: "pixtral-large-latest", label: "Pixtral Large" },
+        ],
+      };
+      return ldModels[ldProvider] || ldModels.anthropic;
+    }
     default:
       return [];
   }
@@ -1495,7 +1813,11 @@ function getCurrentModel(engine, config) {
     case "codex-cli": return config.codexCliModel || "gpt-5.5";
     case "gemini-cli": return config.geminiCliModel || "gemini-2.5-pro";
     case "gemini-api": return config.geminiApiModel || "gemini-2.5-pro";
-    case "langdock-api": return config.langdockApiModel || "claude-sonnet-4-6";
+    case "langdock-api": {
+      if (config.langdockApiModel) return config.langdockApiModel;
+      const defaults = { anthropic: "claude-sonnet-4-6", openai: "gpt-4.1", google: "gemini-2.5-pro", mistral: "mistral-large-latest" };
+      return defaults[config.langdockProvider || "anthropic"] || "claude-sonnet-4-6";
+    }
     default: return null;
   }
 }

package/ui/styles.css

@@ -4184,6 +4184,19 @@ body { display: flex; }
   font-size: var(--text-sm);
   color: var(--text-dim);
 }
+/* Per-project running generation cost chip (VIB-1770) */
+.chat__cost-total {
+  margin-left: auto;
+  font-size: var(--text-xs, 11px);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-dim);
+  background: var(--bg-subtle, rgba(127, 127, 127, 0.12));
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 2px 8px;
+  cursor: default;
+  white-space: nowrap;
+}
 
 .chat__messages {
   flex: 1;
@@ -5032,6 +5045,15 @@ body { display: flex; }
   color: var(--warning, #f59e0b);
 }
 
+/* Per-page estimated generation cost (VIB-1770) */
+.pipeline-cost {
+  font-size: var(--text-xs, 11px);
+  color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+  padding: 0 0 2px;
+  cursor: default;
+}
+
 .pipeline-footer {
   display: flex;
   justify-content: space-between;