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

package/lib/public/modules/session-actions.js

@@ -0,0 +1,294 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { refreshIcons, iconHtml } from './icons.js';
+import { addSystemMessage, VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
+import { openPairDialog } from './split-pair-ui.js';
+import { buildAgentVendorSelect, fillAgentModels, buildAgentEffortSelect, fillAgentEffort } from './agent-config-selects.js';
+import { showToast } from './utils.js';
+
+var menu = null;
+var button = null;
+var outsideHandler = null;
+var escapeHandler = null;
+var handoffDialog = null;
+var handoffEscapeHandler = null;
+var handoffSubmitButton = null;
+
+function closeMenu() {
+  if (menu) menu.remove();
+  menu = null;
+  if (button) button.setAttribute("aria-expanded", "false");
+  if (outsideHandler) document.removeEventListener("pointerdown", outsideHandler, true);
+  if (escapeHandler) document.removeEventListener("keydown", escapeHandler);
+  outsideHandler = null;
+  escapeHandler = null;
+}
+
+function positionMenu() {
+  if (!menu || !button) return;
+  var rect = button.getBoundingClientRect();
+  var width = menu.offsetWidth;
+  menu.style.top = Math.round(rect.bottom + 6) + "px";
+  menu.style.left = Math.max(8, Math.round(rect.right - width)) + "px";
+}
+
+function actionRow(icon, label, description) {
+  var row = document.createElement("button");
+  row.type = "button";
+  row.className = "session-actions-row";
+  row.innerHTML = iconHtml(icon, "session-actions-row-icon") +
+    '<span class="session-actions-row-copy"><strong></strong><span></span></span>' +
+    iconHtml("chevron-right", "session-actions-row-chevron");
+  row.querySelector("strong").textContent = label;
+  row.querySelector(".session-actions-row-copy > span").textContent = description;
+  return row;
+}
+
+function menuShell(label) {
+  var el = document.createElement("div");
+  el.className = "session-actions-menu";
+  el.setAttribute("role", "menu");
+  el.setAttribute("aria-label", label);
+  document.body.appendChild(el);
+  menu = el;
+  button.setAttribute("aria-expanded", "true");
+  return el;
+}
+
+function installCloseHandlers() {
+  outsideHandler = function (event) {
+    if (menu && !menu.contains(event.target) && event.target !== button && !button.contains(event.target)) closeMenu();
+  };
+  escapeHandler = function (event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeMenu();
+      if (button) button.focus();
+    }
+  };
+  setTimeout(function () {
+    document.addEventListener("pointerdown", outsideHandler, true);
+    document.addEventListener("keydown", escapeHandler);
+  }, 0);
+}
+
+function closeHandoffDialog() {
+  if (handoffDialog) handoffDialog.remove();
+  if (handoffEscapeHandler) document.removeEventListener("keydown", handoffEscapeHandler);
+  handoffDialog = null;
+  handoffEscapeHandler = null;
+  handoffSubmitButton = null;
+}
+
+function handoffField(labelText, control) {
+  var field = document.createElement("div");
+  field.className = "handoff-modal-field";
+  var label = document.createElement("label");
+  label.className = "wt-modal-label";
+  label.textContent = labelText;
+  field.appendChild(label);
+  field.appendChild(control);
+  return field;
+}
+
+function requestHandoffDialog() {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) return;
+  closeMenu();
+  ws.send(JSON.stringify({ type: "handoff_session_options" }));
+}
+
+function showHandoffDialog(options) {
+  closeHandoffDialog();
+  var installed = options.installedVendors || [];
+  var vendorInfo = store.get('vendorInfo') || {};
+  if (store.get('isOsUsers')) {
+    installed = installed.filter(function (vendor) {
+      return !vendorInfo[vendor] || vendorInfo[vendor].osUserIsolation !== false;
+    });
+  }
+  if (installed.length < 1) {
+    showToast("Install a coding agent before continuing this session.", "error");
+    return;
+  }
+
+  var currentVendor = store.get('currentVendor') || "claude";
+  var currentModel = store.get('currentModel') || "";
+  var currentEffort = store.get('currentEffort') || "";
+  var container = document.createElement("div");
+  var overlay = document.createElement("div");
+  overlay.className = "wt-modal-overlay";
+  container.appendChild(overlay);
+  var modal = document.createElement("div");
+  modal.className = "wt-modal handoff-modal";
+  modal.setAttribute("role", "dialog");
+  modal.setAttribute("aria-modal", "true");
+  modal.setAttribute("aria-labelledby", "handoff-modal-title");
+
+  var title = document.createElement("div");
+  title.id = "handoff-modal-title";
+  title.className = "wt-modal-title";
+  title.textContent = "Continue in a new agent";
+  modal.appendChild(title);
+  var desc = document.createElement("div");
+  desc.className = "handoff-modal-desc";
+  desc.textContent = "Start an independent session with a focused copy of this conversation's context.";
+  modal.appendChild(desc);
+
+  var source = document.createElement("div");
+  source.className = "handoff-modal-source";
+  var sourceAvatar = document.createElement("img");
+  sourceAvatar.src = VENDOR_AVATARS[currentVendor] || VENDOR_AVATARS.claude;
+  sourceAvatar.alt = "";
+  source.appendChild(sourceAvatar);
+  var sourceCopy = document.createElement("span");
+  var sourceTitle = document.createElement("strong");
+  sourceTitle.textContent = document.getElementById("header-title").textContent || "Current session";
+  var sourceMeta = document.createElement("span");
+  sourceMeta.textContent = "From " + (VENDOR_NAMES[currentVendor] || currentVendor);
+  sourceCopy.appendChild(sourceTitle);
+  sourceCopy.appendChild(sourceMeta);
+  source.appendChild(sourceCopy);
+  modal.appendChild(source);
+
+  var vendorSelect = buildAgentVendorSelect(installed, currentVendor);
+  var modelSelect = document.createElement("select");
+  modelSelect.className = "wt-modal-input";
+  var effortSelect = buildAgentEffortSelect();
+  var vendorField = handoffField("Agent", vendorSelect);
+  var modelField = handoffField("Model", modelSelect);
+  var effortField = handoffField("Reasoning effort", effortSelect);
+  modal.appendChild(vendorField);
+  modal.appendChild(modelField);
+  modal.appendChild(effortField);
+
+  function syncEffort(preferred) {
+    fillAgentEffort(effortSelect, vendorSelect.value, options, modelSelect.value, preferred);
+    var capabilities = (options.capabilitiesByVendor && options.capabilitiesByVendor[vendorSelect.value]) || {};
+    effortField.style.display = capabilities.effort === false ? "none" : "";
+  }
+  fillAgentModels(modelSelect, vendorSelect.value, options, vendorSelect.value === currentVendor ? currentModel : "");
+  syncEffort(vendorSelect.value === currentVendor ? currentEffort : "");
+  vendorSelect.addEventListener("change", function () {
+    fillAgentModels(modelSelect, vendorSelect.value, options, "");
+    syncEffort("");
+  });
+  modelSelect.addEventListener("change", function () { syncEffort(effortSelect.value); });
+
+  var actions = document.createElement("div");
+  actions.className = "wt-modal-actions";
+  var cancel = document.createElement("button");
+  cancel.type = "button";
+  cancel.className = "wt-modal-btn";
+  cancel.textContent = "Cancel";
+  var submit = document.createElement("button");
+  submit.type = "button";
+  submit.className = "wt-modal-btn primary";
+  submit.textContent = "Continue";
+  actions.appendChild(cancel);
+  actions.appendChild(submit);
+  modal.appendChild(actions);
+  container.appendChild(modal);
+  document.body.appendChild(container);
+  handoffDialog = container;
+  handoffSubmitButton = submit;
+
+  cancel.addEventListener("click", closeHandoffDialog);
+  overlay.addEventListener("click", closeHandoffDialog);
+  handoffEscapeHandler = function (event) {
+    if (event.key === "Escape") closeHandoffDialog();
+  };
+  document.addEventListener("keydown", handoffEscapeHandler);
+  submit.addEventListener("click", function () {
+    var ws = getWs();
+    if (!ws || ws.readyState !== 1) return;
+    ws.send(JSON.stringify({
+      type: "handoff_session",
+      targetVendor: vendorSelect.value,
+      model: modelSelect.value,
+      effort: effortSelect.value,
+    }));
+    submit.disabled = true;
+    submit.textContent = "Continuing…";
+  });
+  vendorSelect.focus();
+}
+
+function showMainMenu() {
+  closeMenu();
+  var el = menuShell("Session actions");
+  var addWorker = actionRow("bot", "Add AI Worker", "Open a second agent beside this session.");
+  addWorker.addEventListener("click", function () {
+    var sessionId = store.get('activeSessionId');
+    if (!sessionId) return;
+    closeMenu();
+    openPairDialog({
+      sessionId: sessionId,
+      title: document.getElementById("header-title").textContent,
+      vendor: store.get('currentVendor') || "claude",
+    });
+  });
+  var handoff = actionRow("forward", "Continue in another agent", "Carry this conversation into a new session.");
+  var unavailable = !store.get('sessionHasHistory') || store.get('sessionIsProcessing');
+  handoff.disabled = unavailable;
+  handoff.title = unavailable ? "Available after the current turn is complete" : "";
+  handoff.addEventListener("click", requestHandoffDialog);
+  el.appendChild(addWorker);
+  el.appendChild(handoff);
+  refreshIcons();
+  positionMenu();
+  installCloseHandlers();
+}
+
+function updateVisibility() {
+  if (!button) return;
+  var state = store.snap();
+  var hidden = !state.activeSessionId || state.dmMode || state.paneMode || !!state.splitPanes || state.activeSessionMode !== "gui";
+  button.classList.toggle("hidden", hidden);
+  if (hidden) closeMenu();
+}
+
+export function initSessionActions() {
+  button = document.getElementById("header-session-actions-btn");
+  if (!button) return;
+  button.addEventListener("click", function () {
+    if (menu) closeMenu();
+    else showMainMenu();
+  });
+  store.subscribe(function (state, prev) {
+    if (state.activeSessionId !== prev.activeSessionId || state.dmMode !== prev.dmMode ||
+        state.paneMode !== prev.paneMode || state.splitPanes !== prev.splitPanes ||
+        state.activeSessionMode !== prev.activeSessionMode) updateVisibility();
+  });
+  window.addEventListener("resize", closeMenu);
+  updateVisibility();
+}
+
+export function handleSessionActionMessage(msg) {
+  if (msg.type === "handoff_session_options") {
+    showHandoffDialog(msg);
+    return true;
+  }
+  if (msg.type === "session_handoff_result") {
+    if (msg.ok) closeHandoffDialog();
+    else {
+      showToast(msg.error || "Could not continue the session in another agent.", "error");
+      if (handoffSubmitButton) {
+        handoffSubmitButton.disabled = false;
+        handoffSubmitButton.textContent = "Continue";
+      }
+    }
+    return true;
+  }
+  if (msg.type === "handoff_context") {
+    var sourceName = VENDOR_NAMES[msg.sourceVendor] || msg.sourceVendor || "another agent";
+    addSystemMessage("Continued from “" + (msg.sourceTitle || "Untitled session") + "” in " + sourceName + ".", false);
+    return true;
+  }
+  if (msg.type === "handoff_created") {
+    var targetName = VENDOR_NAMES[msg.targetVendor] || msg.targetVendor || "another agent";
+    addSystemMessage("Continued in a new " + targetName + " session.", false);
+    return true;
+  }
+  return false;
+}

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

@@ -460,7 +460,7 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
       var vendorLabels = {
         claude: "Claude Code",
         codex: "OpenAI Codex",
-        gemini: "Gemini CLI",
+        antigravity: "Antigravity CLI",
         opencode: "OpenCode",
         kiro: "Kiro CLI",
       };

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

@@ -15,7 +15,7 @@ import {
   resolveDefaultVendor,
   startNewSession
 } from './sidebar-sessions.js';
-import { VENDOR_AVATARS, VENDOR_NAMES, VENDOR_ORDER, VENDOR_HOMEPAGES } from './app-rendering.js';
+import { VENDOR_AVATARS, VENDOR_NAMES, VENDOR_ORDER, VENDOR_HOMEPAGES, isExperimentalVendor } from './app-rendering.js';
 import {
   getCachedProjectList,
   getCachedCurrentSlug,
@@ -754,6 +754,7 @@ function renderMobileSessionsInto(container) {
       if (vendor === mobileDefaultVendor) vBtn.classList.add("active");
       vBtn.innerHTML = '<img src="' + VENDOR_AVATARS[vendor] + '" class="mobile-session-new-icon" alt="">' +
         '<span>' + name + '</span>' +
+        (isExperimentalVendor(vendor) ? '<span class="vendor-experimental-badge" aria-label="Experimental integration" title="Experimental integration; not yet validated through direct use testing">🧪</span>' : '') +
         (isInstalled ? "" : '<span class="mobile-vendor-note">Not installed</span>');
       vBtn.addEventListener("click", function () {
         if (!isInstalled) {

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

@@ -13,6 +13,7 @@ import { showIconTooltip, hideIconTooltip, closeUserCtxMenu, getCurrentDmUserId
 import { switchProject, openAddProjectModal, getCachedProjects } from './app-projects.js';
 import { showHomeHub } from './app-home-hub.js';
 import { getPendingTuiAttention } from './app-notifications.js';
+import { isExternalWorktree, externalWorktreeTooltip, appendExternalWorktreeBadge } from './worktree-location.js';
 
 // --- Project state ---
 var cachedProjectList = [];
@@ -489,7 +490,7 @@ export function closeProjectCtxMenu() {
   }
 }
 
-function showIconCtxMenu(anchorEl, slug, name) {
+function showIconCtxMenu(anchorEl, slug, name, options) {
   closeProjectCtxMenu();
   if (closeUserCtxMenu) closeUserCtxMenu();
   closeEmojiPicker();
@@ -510,17 +511,19 @@ function showIconCtxMenu(anchorEl, slug, name) {
   menu.appendChild(iconItem);
 
   if (isWorktree) {
-    var removeWtItem = document.createElement("button");
-    removeWtItem.className = "project-ctx-item project-ctx-delete";
-    removeWtItem.innerHTML = iconHtml("trash-2") + " <span>Remove Worktree</span>";
-    removeWtItem.addEventListener("click", function (e) {
-      e.stopPropagation();
-      closeProjectCtxMenu();
-      if (getWs() && store.get('connected')) {
-        getWs().send(JSON.stringify({ type: "remove_project_check", slug: slug, name: name || slug }));
-      }
-    });
-    menu.appendChild(removeWtItem);
+    if (!options || options.canRemoveWorktree !== false) {
+      var removeWtItem = document.createElement("button");
+      removeWtItem.className = "project-ctx-item project-ctx-delete";
+      removeWtItem.innerHTML = iconHtml("trash-2") + " <span>Remove Worktree</span>";
+      removeWtItem.addEventListener("click", function (e) {
+        e.stopPropagation();
+        closeProjectCtxMenu();
+        if (getWs() && store.get('connected')) {
+          getWs().send(JSON.stringify({ type: "remove_project_check", slug: slug, name: name || slug }));
+        }
+      });
+      menu.appendChild(removeWtItem);
+    }
   } else {
     var wtItem = document.createElement("button");
     wtItem.className = "project-ctx-item";
@@ -1253,8 +1256,8 @@ export function renderIconStrip(projects, currentSlug) {
       (function (wt) {
         var wtEl = document.createElement("a");
         var isWtActive = wt.slug === currentSlug && !currentDmUserId;
-        var isAccessible = wt.worktreeAccessible !== false;
-        wtEl.className = "icon-strip-wt-item" + (isWtActive ? " active" : "") + (!isAccessible ? " wt-disabled" : "");
+        var isExternal = isExternalWorktree(wt);
+        wtEl.className = "icon-strip-wt-item" + (isWtActive ? " active" : "") + (isExternal ? " wt-external" : "");
         wtEl.href = "/p/" + wt.slug + "/";
         wtEl.dataset.slug = wt.slug;
 
@@ -1276,42 +1279,28 @@ export function renderIconStrip(projects, currentSlug) {
         if (wt.isProcessing) wtStatus.classList.add("processing");
         wtEl.appendChild(wtStatus);
 
-        var tooltipText = wt.name;
-        if (!isAccessible) {
-          tooltipText += " (outside project path, cannot be accessed)";
-        }
+        if (isExternal) appendExternalWorktreeBadge(wtEl, "worktree-external-badge");
+
+        var tooltipText = isExternal ? externalWorktreeTooltip(wt.name) : wt.name;
         (function (text, elem) {
           elem.addEventListener("mouseenter", function () { showIconTooltip(elem, text); });
           elem.addEventListener("mouseleave", hideIconTooltip);
         })(tooltipText, wtEl);
 
-        if (isAccessible) {
-          (function (slug) {
-            wtEl.addEventListener("click", function (e) {
-              e.preventDefault();
-              if (switchProject) switchProject(slug);
-            });
-          })(wt.slug);
-        } else {
+        (function (slug) {
           wtEl.addEventListener("click", function (e) {
             e.preventDefault();
+            if (switchProject) switchProject(slug);
           });
-        }
+        })(wt.slug);
 
-        if (isAccessible) {
-          (function (slug, name, elem) {
-            elem.addEventListener("contextmenu", function (e) {
-              e.preventDefault();
-              e.stopPropagation();
-              showIconCtxMenu(elem, slug, name);
-            });
-          })(wt.slug, wt.name, wtEl);
-        } else {
-          wtEl.addEventListener("contextmenu", function (e) {
+        (function (slug, name, elem, external) {
+          elem.addEventListener("contextmenu", function (e) {
             e.preventDefault();
             e.stopPropagation();
+            showIconCtxMenu(elem, slug, name, { canRemoveWorktree: !external });
           });
-        }
+        })(wt.slug, wt.name, wtEl, isExternal);
 
         if (!isWtActive && (wt.pendingPermissions > 0 || getPendingTuiAttention(wt.slug) > 0)) {
           wtEl.classList.add("has-pending-perm");
@@ -1360,7 +1349,10 @@ export function renderIconStrip(projects, currentSlug) {
 
   renderProjectList(projects, currentSlug);
 
-  try { lucide.createIcons({ nodes: [container] }); } catch (e) {}
+  var iconNodes = [container];
+  var mobileProjectList = document.getElementById("project-list");
+  if (mobileProjectList) iconNodes.push(mobileProjectList);
+  try { lucide.createIcons({ nodes: iconNodes }); } catch (e) {}
 }
 
 function renderProjectList(projects, currentSlug) {
@@ -1401,11 +1393,10 @@ function renderProjectList(projects, currentSlug) {
     var wtList = document.createElement("div");
     wtList.className = "mobile-folder-items";
     for (var wi = 0; wi < worktrees.length; wi++) {
-      var isAccessible = worktrees[wi].worktreeAccessible !== false;
       var wtItem = createMobileProjectItem(worktrees[wi], currentSlug, true);
-      if (!isAccessible) wtItem.classList.add("wt-disabled");
-      if (!isAccessible) {
-        wtItem.addEventListener("click", function (e) { e.preventDefault(); e.stopPropagation(); });
+      if (isExternalWorktree(worktrees[wi])) {
+        wtItem.classList.add("wt-external");
+        appendExternalWorktreeBadge(wtItem, "mobile-worktree-external-badge");
       }
       wtList.appendChild(wtItem);
     }

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

@@ -12,7 +12,7 @@ import { dismissOverlayPanels, closeSidebar, updatePageTitle, spawnDustParticles
 import { showConfirm } from './app-misc.js';
 import { getUpcomingSchedules } from './scheduler.js';
 import { refreshMobileChatSheet } from './sidebar-mobile.js';
-import { VENDOR_AVATARS, VENDOR_NAMES, VENDOR_ORDER, VENDOR_HOMEPAGES } from './app-rendering.js';
+import { VENDOR_AVATARS, VENDOR_NAMES, VENDOR_ORDER, VENDOR_HOMEPAGES, isExperimentalVendor } from './app-rendering.js';
 import { openGroup, separateGroup } from './split-view.js';
 import { groupedSessionIds } from './split-group-helpers.js';
 import { openPairDialog } from './split-pair-ui.js';
@@ -299,13 +299,10 @@ function appendSessionCloseButton(el, session) {
   el.appendChild(closeBtn);
 }
 
-// Resolve the vendor the "New session" button should launch: the project's
-// last-used vendor when its CLI is still installed, else the first installed
-// vendor, else Claude (so the button always has a sane label to render).
+// Resolve the vendor the "New session" button should launch from the stable
+// installed-vendor priority (Claude, then Codex, then the remaining vendors).
 export function resolveDefaultVendor() {
   var installed = store.get('installedVendors') || [];
-  var last = store.get('lastVendor') || "";
-  if (last && installed.indexOf(last) !== -1) return last;
   for (var i = 0; i < VENDOR_ORDER.length; i++) {
     if (installed.indexOf(VENDOR_ORDER[i]) !== -1) return VENDOR_ORDER[i];
   }
@@ -330,6 +327,7 @@ export function startNewSession(vendor, extra) {
     currentModel: "",
     currentModels: [],
     vendorSelectionLocked: true,
+    sessionVendorBound: true,
   });
 }
 
@@ -396,10 +394,12 @@ function showNewSessionMenu(anchorBtn, defaultVendor) {
       item.type = "button";
       item.innerHTML = '<img src="' + VENDOR_AVATARS[vendor] + '" class="session-top-action-icon" alt="">' +
         '<span class="session-new-vendor-name">' + name + '</span>' +
+        (isExperimentalVendor(vendor) ? '<span class="vendor-experimental-badge" aria-label="Experimental integration" title="Experimental integration; not yet validated through direct use testing">🧪</span>' : '') +
         (isInstalled ? "" : '<span class="session-new-vendor-note">Not installed</span>' + iconHtml("external-link"));
       item.title = isInstalled
         ? "New " + name + " session"
         : name + " is not installed - open " + VENDOR_HOMEPAGES[vendor];
+      if (isExperimentalVendor(vendor)) item.title += " · Experimental integration; not yet validated through direct use testing";
       item.addEventListener("click", function (e) {
         e.stopPropagation();
         closeSessionCtxMenu();
@@ -977,6 +977,9 @@ function renderLoopChild(s) {
   if (s.isProcessing) {
     textHtml += '<span class="session-processing"></span>';
   }
+  if (s.backgroundTaskCount) {
+    textHtml += '<span class="session-background-task-count">' + s.backgroundTaskCount + '</span>';
+  }
   if (s.loop) {
     var isRalphChild = s.loop.source === "ralph";
     var roleName = s.loop.role === "crafting" ? "Crafting" : s.loop.role === "judge" ? "Judge" : (isRalphChild ? "Coder" : "Run");
@@ -1096,6 +1099,9 @@ function renderLoopGroup(loopId, children, groupKey) {
   if (anyProcessing) {
     textHtml += '<span class="session-processing"></span>';
   }
+  var groupBackgroundTaskCount = 0;
+  for (var bi = 0; bi < children.length; bi++) groupBackgroundTaskCount += children[bi].backgroundTaskCount || 0;
+  if (groupBackgroundTaskCount) textHtml += '<span class="session-background-task-count">' + groupBackgroundTaskCount + '</span>';
   var groupIcon = isDebate ? "mic" : (isRalph ? "repeat" : "calendar-clock");
   var iconClass = isDebate ? " debate" : (isRalph ? "" : " scheduled");
   textHtml += '<span class="session-loop-icon' + iconClass + '">' + iconHtml(groupIcon) + '</span>';
@@ -1205,6 +1211,9 @@ function renderLoopRun(parentGk, startedAtKey, sessions, isRalph) {
   if (anyProcessing) {
     textHtml += '<span class="session-processing"></span>';
   }
+  var runBackgroundTaskCount = 0;
+  for (var bi = 0; bi < sessions.length; bi++) runBackgroundTaskCount += sessions[bi].backgroundTaskCount || 0;
+  if (runBackgroundTaskCount) textHtml += '<span class="session-background-task-count">' + runBackgroundTaskCount + '</span>';
   textHtml += '<span class="session-loop-run-time">' + escapeHtml(timeLabel) + '</span>';
   textHtml += '<span class="session-loop-count' + (isRalph ? "" : " scheduled") + '">' + sessions.length + '</span>';
   textSpan.innerHTML = textHtml;
@@ -1254,6 +1263,9 @@ function renderSessionItem(s) {
   if (s.isProcessing) {
     textHtml += '<span class="session-processing"></span>';
   }
+  if (s.backgroundTaskCount) {
+    textHtml += '<span class="session-background-task-count">' + s.backgroundTaskCount + '</span>';
+  }
   if (s.loop && s.loop.source === "debate") {
     textHtml += '<span class="session-debate-icon" title="Debate">' + iconHtml("mic") + '</span>';
   }
@@ -1322,6 +1334,8 @@ function renderSplitGroupItem(group, members) {
   }
   html += "</span>";
   if (members[0].isProcessing || members[1].isProcessing) html += '<span class="session-processing"></span>';
+  var splitBackgroundTaskCount = (members[0].backgroundTaskCount || 0) + (members[1].backgroundTaskCount || 0);
+  if (splitBackgroundTaskCount) html += '<span class="session-background-task-count">' + splitBackgroundTaskCount + '</span>';
   html += '<span class="split-group-name">' + highlightMatch(group.name || "Split", searchQuery) + "</span>";
   text.innerHTML = html;
   el.appendChild(text);