vibespot 1.5.1 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibespot",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "AI-powered HubSpot CMS landing page builder — vibe coding & React converter",
   "type": "module",
   "bin": {
@@ -19,6 +19,10 @@
     "build": "tsup",
     "test": "vitest run",
     "test:watch": "vitest",
+    "eval": "tsx test/eval/run-eval.ts",
+    "benchmark": "tsx test/eval/benchmark.ts",
+    "prompts:pull": "tsx scripts/sync-prompts.ts",
+    "prompts:seed": "tsx scripts/sync-prompts.ts --from-local",
     "prepublishOnly": "npm run build",
     "contact-monitor": "tsx scripts/contact-monitor.ts",
     "docker:publish": "scripts/docker-publish.sh",

package/ui/chat.js

@@ -29,6 +29,10 @@ let changedModulesInRun = new Set();
 let highlightOnNextModulesUpdated = false;
 let changedListClearTimer = null;
 
+// VIB-1770 — the assistant bubble of the just-finished generation, so the
+// trailing `generation_cost` event can append its estimated cost line to it.
+let lastGenerationBubbleEl = null;
+
 const messagesEl = document.getElementById("chat-messages");
 const inputEl = document.getElementById("chat-input");
 const sendBtn = document.getElementById("chat-send");
@@ -605,6 +609,9 @@ function handleWsMessage(msg) {
       if (chatHeaderTitle) chatHeaderTitle.textContent = msg.themeName || "Chat";
       if (chatHeaderContext) chatHeaderContext.textContent = msg.engine || "";
 
+      // Hydrate the per-project generation cost chip (VIB-1770)
+      updateProjectCostChip(msg.costTotal);
+
       // Restore chat history from server
       if (msg.messages && msg.messages.length > 0) {
         for (const m of msg.messages) {
@@ -744,6 +751,9 @@ function handleWsMessage(msg) {
     case "pipeline_partial":
       handlePipelinePartial(msg);
       break;
+    case "generation_cost":
+      handleGenerationCost(msg);
+      break;
     case "agentic_prompt":
       handleAgenticPrompt();
       break;
@@ -1270,6 +1280,10 @@ function handlePipelineComplete(msg) {
   }
   bubble.appendChild(stats);
 
+  // Remember this bubble so the trailing `generation_cost` event (sent right
+  // after completion) can append its cost line to the same message (VIB-1770).
+  lastGenerationBubbleEl = bubble;
+
   resetPipelineState();
 }
 
@@ -1298,6 +1312,8 @@ function handlePipelinePartial(msg) {
   stats.textContent = `${msg.succeeded.length} modules succeeded, ${msg.failed.length} failed in ${duration}`;
   bubble.appendChild(stats);
 
+  lastGenerationBubbleEl = bubble;
+
   resetPipelineState();
 }
 
@@ -1312,6 +1328,89 @@ function resetPipelineState() {
   renderChatSuggestions();
 }
 
+// ---------------------------------------------------------------------------
+// Generation cost (VIB-1770) — per-page estimate + per-project running total
+// ---------------------------------------------------------------------------
+
+// Format an estimated USD amount. Sub-dollar costs show 4 decimals so a
+// fraction of a cent is still legible; larger amounts round to cents.
+function formatUsd(usd) {
+  const n = Number(usd) || 0;
+  if (n > 0 && n < 0.01) return "$" + n.toFixed(4);
+  if (n < 1) return "$" + n.toFixed(3);
+  return "$" + n.toFixed(2);
+}
+
+function formatTokenCount(tokens) {
+  const n = Number(tokens) || 0;
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M";
+  if (n >= 1_000) return (n / 1_000).toFixed(1).replace(/\.0$/, "") + "K";
+  return String(n);
+}
+
+// Build the per-page cost summary text from a PageCost object.
+// `costComplete === false` means some model wasn't in the price table, so the
+// dollar figure is a lower bound — prefix "≥" and explain it via the title.
+function buildCostText(cost) {
+  if (!cost || !cost.calls) return null;
+  const tokens = formatTokenCount(cost.totalTokens) + " tokens";
+  if (cost.costUsd > 0 || cost.costComplete) {
+    const prefix = cost.costComplete ? "" : "≥ ";
+    return "Est. " + prefix + formatUsd(cost.costUsd) + " · " + tokens;
+  }
+  // No priced calls at all — show tokens only.
+  return tokens;
+}
+
+// Append (or replace) the cost line on a finished generation's bubble.
+function renderCostLineOnBubble(bubble, cost) {
+  if (!bubble) return;
+  const text = buildCostText(cost);
+  if (!text) return;
+  let line = bubble.querySelector(".pipeline-cost");
+  if (!line) {
+    line = document.createElement("div");
+    line.className = "pipeline-cost";
+    bubble.appendChild(line);
+  }
+  line.textContent = text;
+  if (cost.costComplete === false) {
+    line.title = "Some model calls had no price data — this is a lower-bound estimate.";
+  } else {
+    line.title = "Estimated cost of this generation. Local estimate from public model prices; not a bill.";
+  }
+}
+
+// Live `generation_cost` event — arrives right after pipeline completion.
+function handleGenerationCost(msg) {
+  if (msg.cost) renderCostLineOnBubble(lastGenerationBubbleEl, msg.cost);
+  lastGenerationBubbleEl = null;
+  updateProjectCostChip(msg.projectTotal);
+}
+
+// Update the persistent per-project cost chip in the chat header. Hidden when
+// there's no cost yet (new project / CLI engine).
+function updateProjectCostChip(total) {
+  const chip = document.getElementById("chat-cost-total");
+  if (!chip) return;
+  if (!total || !total.generations) {
+    chip.classList.add("hidden");
+    chip.textContent = "";
+    return;
+  }
+  const prefix = total.costComplete === false ? "≥ " : "";
+  chip.textContent = "Σ " + prefix + formatUsd(total.costUsd);
+  chip.title =
+    "Estimated total for this project: " +
+    formatUsd(total.costUsd) +
+    " over " +
+    total.generations +
+    " generation" + (total.generations === 1 ? "" : "s") +
+    " · " + formatTokenCount(total.totalTokens) + " tokens" +
+    (total.costComplete === false ? " (lower bound)" : "");
+  chip.classList.remove("hidden");
+}
+
 // ---------------------------------------------------------------------------
 // Smart chat suggestions — contextual next-step chips after generation
 // ---------------------------------------------------------------------------
@@ -2110,6 +2209,12 @@ function appendRestoredAssistantMessage(text, timestamp, pipeline) {
     }
     const statsClass = pipeline.stats.modulesFailed > 0 ? "pipeline-stats pipeline-stats--partial" : "pipeline-stats";
 
+    // Per-page cost line, if this generation persisted one (VIB-1770)
+    const costText = buildCostText(pipeline.cost);
+    const costHtml = costText
+      ? `<div class="pipeline-cost">${escapeHtml(costText)}</div>`
+      : "";
+
     div.innerHTML = `
       <div class="chat-msg__avatar chat-msg__avatar--ai">AI</div>
       <div class="chat-msg__content">
@@ -2119,6 +2224,7 @@ function appendRestoredAssistantMessage(text, timestamp, pipeline) {
           ${decisionHtml}
           ${modulesHtml}
           <div class="${statsClass}">${statsText}</div>
+          ${costHtml}
         </div>
       </div>`;
   } else {

package/ui/index.html

@@ -484,6 +484,7 @@
                 <div class="chat__header" id="chat-header">
                   <span class="chat__header-title" id="chat-header-title">Chat</span>
                   <span class="chat__header-context" id="chat-header-context"></span>
+                  <span class="chat__cost-total hidden" id="chat-cost-total" title="Estimated total generation cost for this project"></span>
                 </div>
                 <div class="chat__messages" id="chat-messages" role="log" aria-live="polite">
                   <div class="chat__welcome" id="chat-welcome">

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 = "";
 
@@ -230,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);
   }
 
@@ -376,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" },
@@ -397,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)";
@@ -425,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";
@@ -444,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";
@@ -456,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;
 }
 
 // ---------------------------------------------------------------------------
@@ -771,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"));
@@ -903,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

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;