clay-server 3.4.0-beta.9 → 3.4.0

package/lib/public/modules/app-panels.js

@@ -5,8 +5,9 @@ import { refreshIcons } from "./icons.js";
 import { escapeHtml, showToast } from "./utils.js";
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
-import { VENDOR_NAMES } from './app-rendering.js';
+import { VENDOR_NAMES, isExperimentalVendor } from './app-rendering.js';
 import { reportPaneContext } from './pane-bridge.js';
+import { setupModelPicker, renderModelPicker, requestVendorModels, prepareModelPickerOpen, modelDisplayName } from './model-picker.js';
 
 // --- Module-owned state (not in store) ---
 var sessionUsage = { cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
@@ -20,7 +21,6 @@ var configChipWrap = null;
 var configChip = null;
 var configChipLabel = null;
 var configPopover = null;
-var configModelList = null;
 var configModeList = null;
 var configEffortSection = null;
 var configEffortBar = null;
@@ -132,18 +132,6 @@ export function setContextData(v) { contextData = v; }
 
 // --- Internal helpers ---
 
-function modelDisplayName(value, models) {
-  if (!value) return "";
-  if (models) {
-    for (var i = 0; i < models.length; i++) {
-      var m = models[i];
-      if (typeof m === "string") { if (m === value) return m; }
-      else if (m.value === value && m.displayName) return m.displayName;
-    }
-  }
-  return value;
-}
-
 function modeDisplayName(value) {
   for (var i = 0; i < MODE_OPTIONS.length; i++) {
     if (MODE_OPTIONS[i].value === value) return MODE_OPTIONS[i].label;
@@ -198,65 +186,6 @@ function hasBeta(name) {
   return false;
 }
 
-function rebuildModelList() {
-  if (!configModelList) return;
-  // Picker lock policy is capability-based (yoke midSessionModelSwitch):
-  //   Claude -> free. The SDK supports mid-thread swaps on a live query
-  //             (query.setModel: "Change the model used for subsequent
-  //             responses"), and sdk-bridge already routes set_model to
-  //             queryInstance.setModel. Cache re-priming on switch is a
-  //             cost, not a breakage.
-  //   Codex / Kiro -> locked once the session has history: their threads
-  //             bind the model at creation and a mid-thread change would be
-  //             silently ignored. Picks made before the first message still
-  //             work everywhere (sdk-bridge stores into sm.currentModel when
-  //             there's no active queryInstance).
-  var modelSection = configModelList.parentElement;
-  var s = store.snap();
-  var vendor = s.currentVendor || "claude";
-  if (modelSection) modelSection.style.display = "";
-  configModelList.innerHTML = "";
-
-  var caps = s.vendorCapabilities || {};
-  var lockedForGui = s.activeSessionMode === "gui" && !!s.sessionHasHistory && !caps.midSessionModelSwitch;
-
-  var list = s.currentModels.length > 0 ? s.currentModels : (s.currentModel ? [{ value: s.currentModel, displayName: s.currentModel }] : []);
-  for (var i = 0; i < list.length; i++) {
-    var item = list[i];
-    // Support both object { value, displayName } and plain string formats
-    var value = typeof item === "string" ? item : (item.value || "");
-    var label = typeof item === "string" ? item : (item.displayName || value);
-    var btn = document.createElement("button");
-    btn.className = "config-radio-item";
-    if (value === s.currentModel) btn.classList.add("active");
-    if (lockedForGui) btn.classList.add("locked");
-    btn.dataset.model = value;
-    btn.textContent = label;
-    if (lockedForGui) {
-      btn.disabled = true;
-      btn.title = "This vendor binds the model when the session starts. Start a new session to change it.";
-    } else {
-      btn.addEventListener("click", function () {
-        var model = this.dataset.model;
-        var ws = getWs();
-        if (ws && ws.readyState === 1) {
-          ws.send(JSON.stringify({ type: "set_model", model: model }));
-        }
-        configPopover.classList.add("hidden");
-        configChip.classList.remove("active");
-      });
-    }
-    configModelList.appendChild(btn);
-  }
-
-  if (lockedForGui) {
-    var hint = document.createElement("div");
-    hint.className = "config-model-hint";
-    hint.textContent = "Locked after first message. Start a new session to change models.";
-    configModelList.appendChild(hint);
-  }
-}
-
 function rebuildModeList() {
   if (!configModeList) return;
   configModeList.innerHTML = "";
@@ -422,7 +351,7 @@ export function initPanels() {
   configChip = $("config-chip");
   configChipLabel = $("config-chip-label");
   configPopover = $("config-popover");
-  configModelList = $("config-model-list");
+  setupModelPicker();
   configModeList = $("config-mode-list");
   configEffortSection = $("config-effort-section");
   configEffortBar = $("config-effort-bar");
@@ -445,12 +374,22 @@ export function initPanels() {
   var vendorBtnCodex = $("vendor-btn-codex");
   var vendorBtnAntigravity = $("vendor-btn-antigravity");
   var vendorBtnOpenCode = $("vendor-btn-opencode");
+  var vendorBtnKimi = $("vendor-btn-kimi");
+  var vendorBtnGrok = $("vendor-btn-grok");
+  var vendorBtnCopilot = $("vendor-btn-copilot");
+  var vendorBtnQwen = $("vendor-btn-qwen");
+  var vendorBtnJunie = $("vendor-btn-junie");
   var vendorBtnKiro = $("vendor-btn-kiro");
   var vendorBtns = {
     claude: vendorBtnClaude,
     codex: vendorBtnCodex,
     antigravity: vendorBtnAntigravity,
     opencode: vendorBtnOpenCode,
+    kimi: vendorBtnKimi,
+    grok: vendorBtnGrok,
+    copilot: vendorBtnCopilot,
+    qwen: vendorBtnQwen,
+    junie: vendorBtnJunie,
     kiro: vendorBtnKiro,
   };
 
@@ -466,7 +405,10 @@ export function initPanels() {
       var isInstalled = installed.indexOf(v) !== -1;
       btn.classList.toggle("active", v === current);
       btn.classList.toggle("disabled", !isInstalled);
-      btn.title = isInstalled ? (VENDOR_NAMES[v] || v) : (VENDOR_NAMES[v] || v) + " is not installed";
+      btn.classList.toggle("experimental", isExperimentalVendor(v));
+      var title = isInstalled ? (VENDOR_NAMES[v] || v) : (VENDOR_NAMES[v] || v) + " is not installed";
+      if (isExperimentalVendor(v)) title += " · Experimental integration; not yet validated through direct use testing";
+      btn.title = title;
     }
   }
 
@@ -474,7 +416,7 @@ export function initPanels() {
     if (vendor === (store.get('currentVendor') || "claude")) return;
     var installed = store.get('installedVendors') || [];
     if (installed.indexOf(vendor) === -1) return;
-    store.set({ currentVendor: vendor, currentModel: "", currentModels: [], vendorSelectionLocked: true, sessionVendorBound: true });
+    store.set({ currentVendor: vendor, currentModel: "", currentModels: [], vendorCapabilities: {}, vendorSelectionLocked: true, sessionVendorBound: true });
     var ws = getWs();
     if (ws) ws.send(JSON.stringify({ type: "set_vendor", vendor: vendor }));
   }
@@ -483,6 +425,11 @@ export function initPanels() {
   if (vendorBtnCodex) vendorBtnCodex.addEventListener("click", function() { onVendorClick("codex"); });
   if (vendorBtnAntigravity) vendorBtnAntigravity.addEventListener("click", function() { onVendorClick("antigravity"); });
   if (vendorBtnOpenCode) vendorBtnOpenCode.addEventListener("click", function() { onVendorClick("opencode"); });
+  if (vendorBtnKimi) vendorBtnKimi.addEventListener("click", function() { onVendorClick("kimi"); });
+  if (vendorBtnGrok) vendorBtnGrok.addEventListener("click", function() { onVendorClick("grok"); });
+  if (vendorBtnCopilot) vendorBtnCopilot.addEventListener("click", function() { onVendorClick("copilot"); });
+  if (vendorBtnQwen) vendorBtnQwen.addEventListener("click", function() { onVendorClick("qwen"); });
+  if (vendorBtnJunie) vendorBtnJunie.addEventListener("click", function() { onVendorClick("junie"); });
   if (vendorBtnKiro) vendorBtnKiro.addEventListener("click", function() { onVendorClick("kiro"); });
 
   // --- Reactive UI sync ---
@@ -510,8 +457,7 @@ export function initPanels() {
 
     // Vendor changed -> switch model list and current model to match
     if (state.currentVendor !== prev.currentVendor && state.currentVendor) {
-      var ws = getWs();
-      if (ws) ws.send(JSON.stringify({ type: "get_vendor_models", vendor: state.currentVendor }));
+      requestVendorModels(state.currentVendor, true);
     }
 
     // config chip
@@ -521,6 +467,12 @@ export function initPanels() {
         state.currentBetas !== prev.currentBetas ||
         state.currentThinking !== prev.currentThinking ||
         state.currentVendor !== prev.currentVendor ||
+        state.currentModels !== prev.currentModels ||
+        state.vendorCapabilities !== prev.vendorCapabilities ||
+        state.modelListStatus !== prev.modelListStatus ||
+        state.modelListError !== prev.modelListError ||
+        state.modelSelectionPending !== prev.modelSelectionPending ||
+        state.modelSelectionError !== prev.modelSelectionError ||
         state.codexApproval !== prev.codexApproval ||
         state.codexSandbox !== prev.codexSandbox ||
         state.codexWebSearch !== prev.codexWebSearch ||
@@ -621,6 +573,7 @@ export function initPanels() {
       e.stopPropagation();
       var wasHidden = configPopover.classList.toggle("hidden");
       configChip.classList.toggle("active", !wasHidden);
+      if (!wasHidden) prepareModelPickerOpen();
     });
   }
 
@@ -674,7 +627,7 @@ export function updateConfigChip() {
   var s = store.snap();
   var vendor = s.currentVendor || "claude";
   configChipLabel.textContent = modelDisplayName(s.currentModel, s.currentModels);
-  rebuildModelList();
+  renderModelPicker();
   rebuildModeList();
   rebuildEffortBar();
 
@@ -861,9 +814,7 @@ export function updateContextPanel() {
       hCtxEl = document.createElement("div");
       hCtxEl.className = "header-context";
       hCtxEl.innerHTML = '<div class="header-context-bar"><div class="header-context-fill"></div></div><span class="header-context-label"></span>';
-      var workerBtn = document.getElementById("header-add-worker-btn");
-      var contextAnchor = workerBtn && workerBtn.parentNode === statusArea ? workerBtn.nextSibling : statusArea.firstChild;
-      statusArea.insertBefore(hCtxEl, contextAnchor);
+      statusArea.insertBefore(hCtxEl, statusArea.firstChild);
       hCtxEl.addEventListener("mouseenter", function() {
         if (store.get('richContextUsage')) {
           showCtxPopover();

package/lib/public/modules/app-projects.js

@@ -5,6 +5,7 @@ import { escapeHtml, showToast } from './utils.js';
 import { refreshIcons } from './icons.js';
 import { parseEmojis } from './markdown.js';
 import { store } from './store.js';
+import { resetModelPickerState } from './model-picker.js';
 import { getWs, setWs } from './ws-ref.js';
 import { getMessagesEl, getStatusDot } from './dom-refs.js';
 import { userAvatarUrl } from './avatar.js';
@@ -363,6 +364,7 @@ export function renderProjectList() {
 }
 
 export function resetClientState() {
+  resetModelPickerState();
   if (isSearchOpen()) closeSearch();
   getMessagesEl().innerHTML = "";
   store.set({ currentMsgEl: null });

package/lib/public/modules/app-rendering.js

@@ -13,7 +13,7 @@ import { showImageModal, showPasteModal } from './app-misc.js';
 import { sendMessage, hasSendableContent } from './input.js';
 import { getChatLayout } from './theme.js';
 import { getScheduledMsgEl } from './app-rate-limit.js';
-export { VENDOR_ORDER } from './vendor-priority.js';
+export { VENDOR_ORDER, EXPERIMENTAL_VENDORS, isExperimentalVendor } from './vendor-priority.js';
 
 // Keep these client constants aligned with lib/yoke/vendor-registry.js. The
 // browser cannot import the server's CommonJS registry directly.
@@ -22,6 +22,11 @@ export var VENDOR_AVATARS = {
   codex: "/codex-avatar.png",
   antigravity: "/antigravity-avatar.png",
   opencode: "/opencode-avatar.svg",
+  kimi: "/kimi-avatar.svg",
+  grok: "/grok-avatar.svg",
+  copilot: "/copilot-avatar.svg",
+  qwen: "/qwen-avatar.svg",
+  junie: "/junie-avatar.svg",
   kiro: "/kiro-avatar.svg",
 };
 export var VENDOR_NAMES = {
@@ -29,6 +34,11 @@ export var VENDOR_NAMES = {
   codex: "Codex",
   antigravity: "Antigravity CLI",
   opencode: "OpenCode",
+  kimi: "Kimi Code",
+  grok: "Grok Build",
+  copilot: "GitHub Copilot CLI",
+  qwen: "Qwen Code",
+  junie: "Junie CLI",
   kiro: "Kiro CLI",
 };
 // Display order for every vendor Clay knows about, installed or not. Pickers
@@ -40,6 +50,11 @@ export var VENDOR_HOMEPAGES = {
   codex: "https://openai.com/codex/",
   antigravity: "https://antigravity.google/product/antigravity-cli",
   opencode: "https://opencode.ai/",
+  kimi: "https://www.kimi.com/code/",
+  grok: "https://docs.x.ai/build/overview",
+  copilot: "https://github.com/features/copilot/cli",
+  qwen: "https://qwenlm.github.io/qwen-code-docs/",
+  junie: "https://junie.jetbrains.com/",
   kiro: "https://kiro.dev/",
 };
 var NEW_MSG_BTN_DEFAULT = "\u2193 Latest";

package/lib/public/modules/background-tasks-ui.js

@@ -0,0 +1,55 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { escapeHtml } from './utils.js';
+
+var expanded = false;
+
+export function initBackgroundTasksUi() {
+  store.subscribe(function(state, prev) {
+    if (state.activeBackgroundTasks !== prev.activeBackgroundTasks) renderBackgroundTasks();
+  });
+  renderBackgroundTasks();
+}
+
+function renderBackgroundTasks() {
+  var tasks = store.get('activeBackgroundTasks') || [];
+  var existing = document.getElementById('background-tasks-bar');
+  if (tasks.length === 0) {
+    if (existing) existing.remove();
+    expanded = false;
+    return;
+  }
+  var inputArea = document.getElementById('input-area');
+  if (!inputArea || !inputArea.parentNode) return;
+  var bar = existing || document.createElement('div');
+  bar.id = 'background-tasks-bar';
+  bar.className = 'background-tasks-bar';
+  var taskLabel = tasks.length === 1 ? 'background task' : 'background tasks';
+  var html = '<button type="button" class="background-tasks-toggle" aria-expanded="' + expanded + '">' +
+    '<span aria-hidden="true">⏳</span><span class="background-tasks-chip">' + tasks.length + '</span>' +
+    '<span>' + tasks.length + ' ' + taskLabel + '</span></button>';
+  if (expanded) {
+    html += '<div class="background-tasks-list">';
+    for (var i = 0; i < tasks.length; i++) {
+      var task = tasks[i];
+      html += '<div class="background-task-row"><span class="background-task-description" title="' + escapeHtml(task.description || '') + '">' +
+        escapeHtml(task.description || 'Background task') + '</span><span class="background-task-type">' +
+        escapeHtml(task.task_type || 'other') + '</span><button type="button" class="background-task-stop" data-task-id="' +
+        escapeHtml(task.task_id || '') + '">Stop</button></div>';
+    }
+    html += '</div>';
+  }
+  bar.innerHTML = html;
+  if (!existing) inputArea.parentNode.insertBefore(bar, inputArea);
+  bar.querySelector('.background-tasks-toggle').addEventListener('click', function() {
+    expanded = !expanded;
+    renderBackgroundTasks();
+  });
+  var stopButtons = bar.querySelectorAll('.background-task-stop');
+  for (var j = 0; j < stopButtons.length; j++) {
+    stopButtons[j].addEventListener('click', function() {
+      var ws = getWs();
+      if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'stop_task', taskId: this.dataset.taskId }));
+    });
+  }
+}

package/lib/public/modules/filebrowser-tabs.js

@@ -0,0 +1,65 @@
+var tabs = new Map();
+var focusedPath = null;
+var onFocus = null;
+var onEmpty = null;
+
+function label(path) {
+  var parts = String(path || "").split("/");
+  return parts[parts.length - 1] || path;
+}
+
+function render() {
+  var root = document.getElementById("file-viewer-tabs");
+  if (!root) return;
+  root.innerHTML = "";
+  tabs.forEach(function(value, path) {
+    var tab = document.createElement("button");
+    tab.type = "button";
+    tab.className = "file-viewer-tab" + (path === focusedPath ? " active" : "");
+    tab.textContent = label(path);
+    tab.title = path;
+    tab.addEventListener("click", function() { focusFileViewerTab(path); });
+    var close = document.createElement("span");
+    close.className = "file-viewer-tab-close";
+    close.textContent = "×";
+    close.addEventListener("click", function(event) { event.stopPropagation(); closeFileViewerTab(path); });
+    tab.appendChild(close);
+    root.appendChild(tab);
+  });
+}
+
+export function initFileViewerTabs(options) {
+  onFocus = options && options.onFocus;
+  onEmpty = options && options.onEmpty;
+}
+
+export function openFileViewerTab(path, data) {
+  if (!path) return false;
+  var exists = tabs.has(path);
+  tabs.set(path, Object.assign(tabs.get(path) || {}, data || {}));
+  focusedPath = path;
+  render();
+  return !exists;
+}
+
+export function focusFileViewerTab(path) {
+  if (!tabs.has(path)) return false;
+  focusedPath = path;
+  render();
+  if (onFocus) onFocus(path, tabs.get(path));
+  return true;
+}
+
+export function closeFileViewerTab(path) {
+  if (!tabs.has(path)) return;
+  var paths = Array.from(tabs.keys());
+  var index = paths.indexOf(path);
+  tabs.delete(path);
+  if (focusedPath === path) focusedPath = paths[index + 1] || paths[index - 1] || null;
+  render();
+  if (focusedPath && onFocus) onFocus(focusedPath, tabs.get(focusedPath));
+  if (!focusedPath && onEmpty) onEmpty();
+}
+
+export function focusedFileViewerTab() { return focusedPath; }
+export function clearFileViewerTabs() { tabs.clear(); focusedPath = null; render(); }

package/lib/public/modules/filebrowser.js

@@ -9,6 +9,7 @@ import { copyMarkdownFormatting } from './rich-clipboard.js';
 import { animateMarkdownChange, beginMarkdownPresentation, cancelMarkdownFollow, isFollowingMarkdown } from './markdown-live-edit.js';
 import { store } from './store.js';
 import { enterMarkdownSlides, exitMarkdownSlides, handleMarkdownSlideKey, syncMarkdownSlidesButton, toggleMarkdownSlideLevelMenu } from './markdown-slides.js';
+import { initFileViewerTabs, openFileViewerTab, closeFileViewerTab, focusedFileViewerTab, clearFileViewerTabs } from './filebrowser-tabs.js';
 
 var ctx;
 var showDropHint = function () {};
@@ -30,6 +31,14 @@ var pendingFileAt = null;    // callback for pending file-at
 
 export function initFileBrowser(_ctx) {
   ctx = _ctx;
+  var mainPanels = document.getElementById("main-panels");
+  if (mainPanels && ctx.fileViewerEl) mainPanels.insertBefore(ctx.fileViewerEl, mainPanels.firstChild);
+  initFileViewerTabs({
+    onFocus: function(path) {
+      if (path !== currentFilePath) requestFileContent(path);
+    },
+    onEmpty: function() { teardownFileViewer(); },
+  });
 
   // Load material file icons in background
   initFileIcons().then(function () {
@@ -133,7 +142,7 @@ export function initFileBrowser(_ctx) {
 
   // Close button
   document.getElementById("file-viewer-close").addEventListener("click", function () {
-    closeFileViewer();
+    closeFileViewerTab(focusedFileViewerTab());
   });
 
   // Full-viewport presentation toggle
@@ -448,6 +457,14 @@ function ensureRenderedMarkdown() {
 }
 
 export function closeFileViewer() {
+  if (focusedFileViewerTab()) {
+    closeFileViewerTab(focusedFileViewerTab());
+    return;
+  }
+  teardownFileViewer();
+}
+
+function teardownFileViewer() {
   if (currentFilePath && isFollowingMarkdown(currentFilePath)) cancelMarkdownFollow();
   sendUnwatch();
   inlineDiffActive = false;
@@ -475,8 +492,8 @@ export function setFileViewerFullscreen(enabled) {
 }
 
 export function resetFileBrowser() {
-  // Close viewer
-  closeFileViewer();
+  clearFileViewerTabs();
+  teardownFileViewer();
   // Clear all cached state
   treeData = {};
   currentContent = null;
@@ -513,6 +530,7 @@ export function openFile(filePath, opts) {
     cancelMarkdownFollow();
   }
   pendingRenderedOpen = !!(opts && opts.rendered);
+  openFileViewerTab(filePath);
   if (opts && opts.diff) {
     pendingOpenMode = { type: "diff", oldStr: opts.diff.oldStr, newStr: opts.diff.newStr };
   } else {
@@ -540,6 +558,7 @@ export function openWorkingTreeDiff(diff) {
 
 export function presentMarkdownEdit(msg) {
   if (!msg || !beginMarkdownPresentation(msg.path)) return;
+  openFileViewerTab(msg.path, { content: msg.content });
   pendingOpenMode = null;
   pendingRenderedOpen = true;
   pendingRefresh = false;
@@ -1031,6 +1050,7 @@ function renderEntries(container, entries, depth) {
 // --- File viewer ---
 
 function showFileContent(msg) {
+  openFileViewerTab(msg.path, { content: msg.content });
   var pathEl = document.getElementById("file-viewer-path");
   var bodyEl = document.getElementById("file-viewer-body");
   var renderBtn = document.getElementById("file-viewer-render");

package/lib/public/modules/mate-sidebar.js

@@ -6,6 +6,7 @@ import { hideKnowledge } from './mate-knowledge.js';
 import { isSchedulerOpen, closeScheduler } from './scheduler.js';
 import { hideNotes } from './sticky-notes.js';
 import { openSearch as openSessionSearch } from './session-search.js';
+import { isExperimentalVendor } from './vendor-priority.js';
 
 var getWs = null;
 var currentMateId = null;
@@ -154,17 +155,24 @@ export function showMateSidebar(mateId, mateData) {
       codex: "/codex-avatar.png",
       antigravity: "/antigravity-avatar.png",
       opencode: "/opencode-avatar.svg",
+      kimi: "/kimi-avatar.svg",
+      grok: "/grok-avatar.svg",
+      copilot: "/copilot-avatar.svg",
+      qwen: "/qwen-avatar.svg",
+      junie: "/junie-avatar.svg",
       kiro: "/kiro-avatar.svg",
     };
-    var vendorNames = { claude: "Claude Code", codex: "Codex", antigravity: "Antigravity CLI", opencode: "OpenCode", kiro: "Kiro CLI" };
-    var vendorKeys = ["claude", "codex", "antigravity", "opencode", "kiro"];
+    var vendorNames = { claude: "Claude Code", codex: "Codex", grok: "Grok Build", kimi: "Kimi Code", copilot: "GitHub Copilot CLI", qwen: "Qwen Code", junie: "Junie CLI", antigravity: "Antigravity CLI", opencode: "OpenCode", kiro: "Kiro CLI" };
+    var vendorKeys = ["claude", "codex", "grok", "kimi", "copilot", "qwen", "junie", "antigravity", "opencode", "kiro"];
     mateVendorWrap.innerHTML = "";
     for (var vi = 0; vi < vendorKeys.length; vi++) {
       var vk = vendorKeys[vi];
       var vBtn = document.createElement("button");
       vBtn.className = "mate-vendor-btn" + (vk === mateVendor ? " active" : "");
+      if (isExperimentalVendor(vk)) vBtn.classList.add("experimental");
       if (available.indexOf(vk) === -1) vBtn.classList.add("disabled");
       vBtn.dataset.vendor = vk;
+      vBtn.title = vendorNames[vk] + (isExperimentalVendor(vk) ? " · Experimental integration; not yet validated through direct use testing" : "");
       vBtn.innerHTML = '<img src="' + vendorIcons[vk] + '" class="mate-vendor-icon" alt="' + vendorNames[vk] + '"><span class="mate-vendor-label">' + vendorNames[vk] + '</span>';
       vBtn.addEventListener("click", function() {
         var v = this.dataset.vendor;