clay-server 3.4.0-beta.2 → 3.4.0-beta.20

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

@@ -13,33 +13,48 @@ 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, 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.
 export var VENDOR_AVATARS = {
   claude: "/claude-code-avatar.png",
   codex: "/codex-avatar.png",
-  gemini: "/gemini-avatar.svg",
+  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 = {
   claude: "Claude Code",
   codex: "Codex",
-  gemini: "Gemini CLI",
+  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
 // render the full list so a missing CLI reads as "not installed yet" rather
 // than "Clay doesn't support it".
-export var VENDOR_ORDER = ["claude", "codex", "gemini", "opencode", "kiro"];
 // Where to send the user when they pick a vendor whose CLI isn't installed.
 export var VENDOR_HOMEPAGES = {
   claude: "https://claude.com/product/claude-code",
   codex: "https://openai.com/codex/",
-  gemini: "https://github.com/google-gemini/gemini-cli",
+  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/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;
@@ -152,19 +153,26 @@ export function showMateSidebar(mateId, mateData) {
     var vendorIcons = {
       claude: "/claude-code-avatar.png",
       codex: "/codex-avatar.png",
-      gemini: "/gemini-avatar.svg",
+      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", gemini: "Gemini CLI", opencode: "OpenCode", kiro: "Kiro CLI" };
-    var vendorKeys = ["claude", "codex", "gemini", "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;

package/lib/public/modules/model-picker.js

@@ -0,0 +1,263 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+
+var configModelList = null;
+var configPopover = null;
+var configChip = null;
+var requestCounter = 0;
+var selectionCounter = 0;
+var requestTimer = null;
+
+export function modelEntryValue(entry) {
+  if (!entry) return "";
+  if (typeof entry === "string") return entry;
+  return entry.value || entry.id || "";
+}
+
+export function modelEntryMatches(entry, value) {
+  if (!entry || !value) return false;
+  if (typeof entry === "string") return entry === value;
+  return entry.value === value || entry.id === value || entry.resolvedModel === value;
+}
+
+export function modelDisplayName(value, models) {
+  if (!value) return "";
+  var list = models || [];
+  for (var i = 0; i < list.length; i++) {
+    if (modelEntryMatches(list[i], value)) {
+      return typeof list[i] === "string" ? list[i] : (list[i].displayName || modelEntryValue(list[i]));
+    }
+  }
+  return value;
+}
+
+function vendorDisplayName(vendor) {
+  var info = store.get('vendorInfo') || {};
+  return info[vendor] && info[vendor].displayName ? info[vendor].displayName : vendor;
+}
+
+function clearRequestTimer() {
+  if (!requestTimer) return;
+  clearTimeout(requestTimer);
+  requestTimer = null;
+}
+
+export function setupModelPicker() {
+  configModelList = document.getElementById("config-model-list");
+  configPopover = document.getElementById("config-popover");
+  configChip = document.getElementById("config-chip");
+}
+
+export function resetModelPickerState() {
+  clearRequestTimer();
+  store.set({
+    modelListVendor: "",
+    modelListStatus: "idle",
+    modelListError: "",
+    modelRequestId: "",
+    modelSelectionPending: null,
+    modelSelectionError: "",
+  });
+}
+
+export function requestVendorModels(vendor, force) {
+  if (!vendor) return null;
+  var s = store.snap();
+  if (!force && s.modelListVendor === vendor) {
+    if (s.modelListStatus === "loading") return s.modelRequestId || null;
+    if (s.modelListStatus === "ready" && s.currentModels && s.currentModels.length > 0) return null;
+  }
+
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) {
+    store.set({
+      modelListVendor: vendor,
+      modelListStatus: "error",
+      modelListError: "The connection is not ready. Reconnect and retry.",
+    });
+    return null;
+  }
+
+  requestCounter++;
+  var requestId = "models-" + Date.now().toString(36) + "-" + requestCounter;
+  clearRequestTimer();
+  store.set({
+    modelListVendor: vendor,
+    modelListStatus: "loading",
+    modelListError: "",
+    modelRequestId: requestId,
+  });
+  ws.send(JSON.stringify({ type: "get_vendor_models", vendor: vendor, requestId: requestId }));
+  requestTimer = setTimeout(function() {
+    var current = store.snap();
+    if (current.modelRequestId !== requestId || current.modelListStatus !== "loading") return;
+    store.set({
+      modelListStatus: "error",
+      modelListError: vendorDisplayName(vendor) + " model loading timed out. Retry to try again.",
+    });
+  }, 35000);
+  return requestId;
+}
+
+export function prepareModelPickerOpen() {
+  var s = store.snap();
+  var vendor = s.currentVendor || "claude";
+  var needsModels = !s.currentModels || s.currentModels.length === 0;
+  var wrongVendor = s.modelListVendor !== vendor;
+  var retryable = s.modelListStatus === "error" || s.modelListStatus === "empty" || s.modelListStatus === "idle";
+  requestVendorModels(vendor, needsModels || wrongVendor || retryable);
+}
+
+export function getModelInfoUpdate(msg) {
+  var vendor = msg.vendor || store.get('currentVendor') || "claude";
+  var currentVendor = store.get('currentVendor');
+  if (currentVendor && vendor !== currentVendor) return null;
+  if (msg.sessionId != null && msg.sessionId !== store.get('activeSessionId')) return null;
+
+  var s = store.snap();
+  if (msg.requestId && s.modelRequestId && msg.requestId !== s.modelRequestId) return null;
+
+  var models = Array.isArray(msg.models) ? msg.models : [];
+  var unsolicitedEmptyWhileLoading = s.modelListStatus === "loading"
+    && s.modelListVendor === vendor
+    && !msg.requestId
+    && !msg.modelStatus
+    && !msg.error
+    && models.length === 0;
+  if (unsolicitedEmptyWhileLoading) {
+    return {
+      modelListVendor: vendor,
+      modelListStatus: "loading",
+      modelListError: "",
+    };
+  }
+
+  clearRequestTimer();
+  var status = msg.modelStatus || (msg.error ? "error" : (models.length > 0 ? "ready" : "empty"));
+  return {
+    modelListVendor: vendor,
+    modelListStatus: status,
+    modelListError: msg.error || "",
+    modelRequestId: "",
+  };
+}
+
+export function requestModelSelection(model) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) {
+    store.set({ modelSelectionError: "The connection is not ready. Reconnect before selecting a model." });
+    return;
+  }
+  var s = store.snap();
+  selectionCounter++;
+  var requestId = "model-select-" + Date.now().toString(36) + "-" + selectionCounter;
+  store.set({
+    currentModel: model,
+    modelSelectionPending: { requestId: requestId, model: model, previousModel: s.currentModel || "" },
+    modelSelectionError: "",
+  });
+  ws.send(JSON.stringify({
+    type: "set_model",
+    model: model,
+    vendor: s.currentVendor || "claude",
+    requestId: requestId,
+  }));
+}
+
+export function handleModelSelectionResult(msg) {
+  var pending = store.get('modelSelectionPending');
+  if (!pending || (msg.requestId && msg.requestId !== pending.requestId)) return false;
+  if (msg.ok) {
+    store.set({
+      currentModel: msg.model || pending.model,
+      modelSelectionPending: null,
+      modelSelectionError: "",
+    });
+    if (configPopover) configPopover.classList.add("hidden");
+    if (configChip) configChip.classList.remove("active");
+  } else {
+    store.set({
+      currentModel: pending.previousModel,
+      modelSelectionPending: null,
+      modelSelectionError: msg.error || "The model could not be selected.",
+    });
+  }
+  return true;
+}
+
+function appendState(title, detail, retry) {
+  var stateEl = document.createElement("div");
+  stateEl.className = "config-model-state";
+  if (title === "Loading models…") {
+    var spinner = document.createElement("span");
+    spinner.className = "config-model-spinner";
+    spinner.setAttribute("aria-hidden", "true");
+    stateEl.appendChild(spinner);
+  }
+  var textWrap = document.createElement("div");
+  var titleEl = document.createElement("div");
+  titleEl.className = "config-model-state-title";
+  titleEl.textContent = title;
+  textWrap.appendChild(titleEl);
+  if (detail) {
+    var detailEl = document.createElement("div");
+    detailEl.className = "config-model-state-detail";
+    detailEl.textContent = detail;
+    textWrap.appendChild(detailEl);
+  }
+  stateEl.appendChild(textWrap);
+  if (retry) {
+    var retryBtn = document.createElement("button");
+    retryBtn.type = "button";
+    retryBtn.className = "config-model-retry";
+    retryBtn.textContent = "Retry";
+    retryBtn.addEventListener("click", function() {
+      requestVendorModels(store.get('currentVendor') || "claude", true);
+    });
+    stateEl.appendChild(retryBtn);
+  }
+  configModelList.appendChild(stateEl);
+}
+
+export function renderModelPicker() {
+  if (!configModelList) return;
+  var s = store.snap();
+  var vendor = s.currentVendor || "claude";
+  var status = s.modelListVendor === vendor ? s.modelListStatus : "idle";
+  configModelList.innerHTML = "";
+
+  if (status === "loading") {
+    appendState("Loading models…", "Starting " + vendorDisplayName(vendor) + " and requesting its model catalog.", false);
+    return;
+  }
+  if (status === "error") {
+    appendState("Couldn’t load models", s.modelListError || "An unexpected error occurred.", true);
+    return;
+  }
+  if (status === "empty" || !s.currentModels || s.currentModels.length === 0) {
+    appendState("No models available", s.modelListError || "The vendor returned an empty model catalog.", true);
+    return;
+  }
+
+  for (var i = 0; i < s.currentModels.length; i++) {
+    var item = s.currentModels[i];
+    var value = modelEntryValue(item);
+    if (!value) continue;
+    var button = document.createElement("button");
+    button.className = "config-radio-item";
+    if (modelEntryMatches(item, s.currentModel)) button.classList.add("active");
+    button.dataset.model = value;
+    button.textContent = typeof item === "string" ? item : (item.displayName || value);
+    if (s.modelSelectionPending && s.modelSelectionPending.model === value) {
+      button.classList.add("pending");
+      button.textContent += " · Selecting…";
+    }
+    button.disabled = !!s.modelSelectionPending;
+    button.addEventListener("click", function() { requestModelSelection(this.dataset.model); });
+    configModelList.appendChild(button);
+  }
+
+  if (s.modelSelectionError) {
+    appendState("Model selection failed", s.modelSelectionError, false);
+  }
+}

package/lib/public/modules/notifications.js

@@ -72,6 +72,7 @@ export function initNotifications(_ctx) {
   if (window.visualViewport) {
     var layout = $("layout");
     var mobileTabBar = document.getElementById("mobile-tab-bar");
+    var keyboardWasOpen = false;
     // Capture initial viewport height before any keyboard interaction.
     // In iOS PWA standalone mode, window.innerHeight shrinks when the
     // keyboard opens, so we need a stable baseline for comparison.
@@ -86,7 +87,12 @@ export function initNotifications(_ctx) {
       // Toggle class so CSS can remove the tab-bar bottom padding while keyboard is up
       var keyboardOpen = vv.height < stableViewportHeight - 100;
       document.body.classList.toggle("keyboard-open", keyboardOpen);
-      if (!keyboardOpen) ctx.scrollToBottom();
+      if (keyboardOpen && !keyboardWasOpen && ctx.forceScrollToBottom) {
+        requestAnimationFrame(function() { ctx.forceScrollToBottom(); });
+      } else if (!keyboardOpen) {
+        ctx.scrollToBottom();
+      }
+      keyboardWasOpen = keyboardOpen;
       // Hide tab bar when software keyboard is open
       if (mobileTabBar) {
         if (keyboardOpen) {

package/lib/public/modules/pane-bridge.js

@@ -5,6 +5,7 @@
 
 import { store } from './store.js';
 import { applyContextView, getContextView } from './app-panels.js';
+import { forceExternalLinkToNewTab } from './pane-links.js';
 
 var panelOpen = false;
 
@@ -29,9 +30,19 @@ function togglePaneContextPanel() {
   applyContextView(panelOpen ? "panel" : "off");
 }
 
+function preparePaneLink(event) {
+  var target = event.target;
+  if (!target || typeof target.closest !== "function") return;
+  var anchor = target.closest("a[href]");
+  if (!anchor || anchor.hasAttribute("download")) return;
+  forceExternalLinkToNewTab(anchor, window.location.href);
+}
+
 export function initPaneBridge() {
   if (!store.get('paneMode')) return;
   panelOpen = getContextView() === "panel";
+  document.addEventListener("click", preparePaneLink, true);
+  document.addEventListener("auxclick", preparePaneLink, true);
   window.addEventListener("message", function (event) {
     if (event.origin !== window.location.origin) return;
     var msg = event.data;

package/lib/public/modules/pane-links.js

@@ -0,0 +1,23 @@
+export function isExternalWebLink(href, currentHref) {
+  if (!href) return false;
+  try {
+    var url = new URL(href, currentHref);
+    var currentUrl = new URL(currentHref);
+    if (url.protocol !== "http:" && url.protocol !== "https:") return false;
+    return url.origin !== currentUrl.origin;
+  } catch (err) {
+    return false;
+  }
+}
+
+export function forceExternalLinkToNewTab(anchor, currentHref) {
+  if (!anchor || !isExternalWebLink(anchor.href, currentHref)) return false;
+
+  var rel = (anchor.getAttribute("rel") || "").split(/\s+/).filter(Boolean);
+  if (rel.indexOf("noopener") === -1) rel.push("noopener");
+  if (rel.indexOf("noreferrer") === -1) rel.push("noreferrer");
+
+  anchor.setAttribute("target", "_blank");
+  anchor.setAttribute("rel", rel.join(" "));
+  return true;
+}

package/lib/public/modules/project-switcher.js

@@ -19,6 +19,7 @@ import { getCachedProjects, switchProject } from './app-projects.js';
 import { openDm } from './app-dm.js';
 import { mateAvatarUrl } from './avatar.js';
 import { parseEmojis } from './markdown.js';
+import { isExternalWorktree, externalWorktreeTooltip, appendExternalWorktreeBadge } from './worktree-location.js';
 
 var _projectMru = [];   // project slugs, most recent first
 var _mateMru = [];      // mate ids (mate_XXX), most recent first
@@ -257,18 +258,16 @@ function buildProjectEntries() {
   // Keep natural (server-provided) order so the list looks the same
   // every time the switcher opens. MRU only drives initial highlight.
   return projects.map(function (p) {
-    // Worktrees can end up "outside project path" (parent workspace
-    // unmounted or moved); those are effectively unreachable from
-    // this session and shouldn't be switchable.
-    var unreachable = p.isWorktree && p.worktreeAccessible === false;
+    var external = isExternalWorktree(p);
     return {
       key: p.slug,
       title: p.title || p.project || p.slug,
       icon: p.icon || null,
       fallbackIcon: 'folder',
       isCurrent: p.slug === store.get('currentSlug'),
-      disabled: unreachable,
-      disabledReason: unreachable ? 'Outside project path' : null,
+      external: external,
+      disabled: false,
+      disabledReason: null,
     };
   });
 }
@@ -336,6 +335,7 @@ function buildEntryNode(entry, index) {
   item.className = 'cmd-palette-item project-switcher-item';
   if (entry.disabled) item.classList.add('disabled');
   if (entry.disabled && entry.disabledReason) item.title = entry.disabledReason;
+  if (entry.external) item.title = externalWorktreeTooltip(entry.title);
   item.dataset.index = String(index);
 
   var iconWrap = document.createElement('div');
@@ -353,6 +353,7 @@ function buildEntryNode(entry, index) {
     fallback.setAttribute('data-lucide', entry.fallbackIcon || 'folder');
     iconWrap.appendChild(fallback);
   }
+  if (entry.external) appendExternalWorktreeBadge(iconWrap, 'project-switcher-external-badge');
   item.appendChild(iconWrap);
 
   var body = document.createElement('div');